[Vue] Vuex

Vuex란?

데이터를 store에 저장하고, 프로젝트 전체에서 사용할 수 있도록 해주는 것이 Vuex이다.

Vuex 설치

npm install vuex@next --save

Vuex 저장소 만들기

import {createStore} from 'vuex'

const store = createStore ({
	state(){
    	return {
        	user: {}
        }
    },
  	mutations:{
    	user(state, data){
        	state.user = data;
        }
    },
  	plugins: [
    	persistedstate({
        	paths: ['user']
        })
    ]
});

export default store;

Vuex 데이터 가져오기

store.js에 있는 state 꺼내쓰는 방법은 간단하다. $store.state.데이터명을 사용하면 된다.

<p>안녕 나는 {{ $store.state.name }}야.</p>

State

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

//Vue
data: {
	message: 'Hello Vue js'
}

//Vuex
state: {
	messgge:'Hello Vue.js'
}

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

//Vuex
<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.getters.getNumber}}</p>
<p>{{this.$store.getters.doubleNumber}}</p>

Mutations

• state의 값을 변경할 수 있는 유일한 방법이자 메서드
• 뮤테이션은 commit()으로 동작시킨다.

//store.js
state: {num:10},
mutations: {
	printNumber(state){
    	return state.num
    },
    sumNumbers(state, anotherNum){
    	return state.num + anotherNum;
    }
}

//App.vue
this.$store.commit('printNumber');
this.$store.commit('sumNumbers', 20);

Mutations의 commit()형식

• state를 변경하기 위해 mutations를 동작시킬 때 인자(payload)를 전달할 수 있음

//store.js
state: {storeNum: 10},
mutations: {
	modifyState(state, payload){
    	console.log(payload.str);
      	return state.storeNum += payload.num;
    }
}

//App.vue
this.$store.commit('modifyState', {
	str: 'passed from payload',
  	num: 20
});

actions

• 비동기 처리 로직을 선언하는 메서드. 비동기 로직을 담당하는 mutations
• 데이터 요청, Promise, ES6 asyne과 같은 비동기 처리는 모두 actions에 선언

//store.js
state:{
	num:10
},
mutations: {
	doubleNumber(state){
    	state.num * 2;
    }
},
actions: {
	delayDoubleNumber(context){ // context로 store의 메서드와 속성 접근
    	context.commit('doubleNumber');
    }
}

//App.vue
this.$store.dispatch('delayDoubleNumber');