Vuex state와 getters

state란

• 여러 컴포넌트 간에 공유할 데이터 - 상태

Vue와 Vuex의 사용법의 차이

Vue

// Vue
data: {
	message: "Hello Vue.js!"
}

<p>{{ message }}</p>

Vuex

// Vuex
state: {
	message: "Hello Vue.js!"
}

<p>{{ this.$store.state.message }}</p>

getters란

• state 값을 접근하는 속성이자 computed() 처럼 미리 연산된 값을 접근하는 속성

예제

store.js

state: {
	num: 10
},
getters: {
	getNumber(state) {
    	return state.num;
    },
    doubleNumber(state) {
      return state.num * 2;
    }
}   

<p>{{ this.$store.state.getNumber }}</p>
<p>{{ this.$store.state.doubleNumber }}</p>