vuex3 38. Vue - vuex 개념 정리 1. Store 각 vue 컴포넌트에서 사용하는 데이터를 다른 컴포넌트와 공유하여 사용하기 위해서 store라는 하나의 데이터 창고를 형성하여 각 컴포넌트의 데이터를 보관한다. 2. Store module 모듈이라는 분리된 저장공간을 만들어, 각 컴포넌트의 데이터를 따로 정리하여 보관할 수 있다. 3. Store의 속성(option)개념 namespaced: 스토어 모듈임을 명시하는 속성, boolean state: 뷰 컴포넌트에서 사용되는 데이터 getters: 뷰 컴포넌트의 computed()와 동일한 기능을 작성하는 부분 , 일방통행 - state 데이터를 읽기만 가능 mutations: 뷰 컴포넌트의 methods()와 동일한 기능을 작성하는 부분, 쌍방통행 - state 값 변경 가능 actio.. 2021. 6. 21. 37. Vue - vuex helper 1. Vuex Helper 이전 포스팅에서 Store 개념을 사용하기 위해 Vuex를 설치하고 사용법을 익혀보았다. 이번 포스팅에서는 Vuex를 사용하여 반복되는 코드를 줄이고 코드의 효율성 및 재활용을 높이는 방법을 알아보자. a. mapState https://next.vuex.vuejs.org/guide/state.html#the-mapstate-helper State | Vuex State Single State Tree Vuex uses a single state tree - that is, this single object contains all your application level state and serves as the "single source of truth." This also .. 2021. 6. 21. 34. Vue - vuex 기본구조(store, module) 1. 설치 - 터미널 입력: npm i vuex@next (vue 3버전 사용시) 2. 설정 a) src - store 폴더 생성 - index.js 파일 생성 import {createStore} from 'vuex' export default createStore({ modules: { // Store 모듈이 구성되는 곳 } }) b) main.js에 index.js를 연결하기 import {createApp} from 'vue' import App from './App' import router from './routes/index.js' import store from './store' // 원래는 './store/index.js' 이렇게 경로를 작성해야 하는데, // 어떤 폴더안에 있는 inde.. 2021. 6. 8. 이전 1 다음
