store/index.js

store/index.js

1. CMD> npm i vuex@next --save

2. import { createStore } from "vuex";

---

- state 상태변수(전역변수)

어떤 컴포넌트에서 바꿀수 있는 변수

state : {
        counter : 20,        
    },

- getters 결과값을 가지고 가는 메소드

다른 컴포넌트에서도 methods의 역할을 함

getCounter(state){
            return state.counter;
        },

- mutations 결과값을 바꾸는 함수(동기)

동기 - 순차적으로 실행 {단점: 효율이 떨어짐}

mutations : {
        setCounter : (state, value) => {
            state.counter = value;
        },
        setCounter1 (state, value) {
            state.counter = value + 100;
        }
    },

- actions 결과값을 바꾸는 함수 (비동기)

비동기 - 시작순서는 순차적, 끝나는 순서는 달라짐.

actions : {
        actionCounter(context, payload){
            const value = payload.counter;
            // 위에 생성되어있는 mutation의 setCounter를 호출함
            // 끝나는 지점만 다르게!
            context.commit('setCounter', value);
        }
    },