vuex 2

[Vue3] Vuex4 활용하기1 - mutations

1. 값을 저장 하기 store.js 파일 내에서 state() 함수 안에 데이터를 객체 형식으로 저장을 한다. state(){ return { name : 'kim', age: 20, } }, 이 데이터를 App.vue 파일 안에서 '불러' 오도록 할것이다. 2. 값을 불러오기 vuex name : {{ $store.state.name }} 값을 불러와 출력할 때에는 $store 안에 있는 state 안에 있는 name 을 출력해달라고 정중하게 부탁하도록 한다. {{ 이중괄호 }} 를 써야 완성이다. 객체의 형식이므로 객체를 불러다 쓰는 방식을 그대로 사용한다. 출력 화면은 아래와 같다. 2. 값을 수정하기(or) 값을 변경해서 다시 출력하기 그런데 언제까지나 store 에 저장한 초기값만 불러다 출력..

frontend/Vue.js 2023.05.29

[Vue3] Vuex4 사용하기

vue를 사용하는데 데이터가 너무 많거나, 컴포넌트간에 데이터를 주고받는 것이 props 만으로 해결되지 않을 때 사용하는 라이브러리 이다. store.js 파일 하나에 데이터를 다 때려넣은 뒤에 하나씩 꺼내먹기.. 꺼내쓰기 때문에 간편하기도 하다. 아니 이럴거면 나는 mitt를 왜 배운거야.... 그러나 그것은 그렇지 않다는 것이 코딩애플 스앵님의 말씀. 프로젝트 규모가 크지 않은 이상 vuex를 사용하는 것은 배보다 배꼽이 더 클 수도 있다고 한다. 기술적인 효율성을 중시하도록 하자. 배움의 효율성을 중시하는 것 보다...(이제 학생의 입장에서 벗어날 때도 되었다.) 1. 설치하기 npm install vuex@next 혹은 yarn add vuex@next 2. 셋팅하기 2-1. src 폴더 안에 ..

frontend/Vue.js 2023.05.26