[Vue.js] Vuex란?

 

서론

◽ Vuex가 나온 이유

 

[공식문서] 단방향 데이터 흐름의 도표

 

Vue는 단방향 데이터 흐름이다.

state(=data), view(=template), actions(=methods)이 단방향으로 흘러간다.

하지만 공통의 state, 즉 data를 공유하는 여러 컴포넌트가 있는 경우 이 단순함이 깨질 수 있다.

 

1. 여러 view들은 동일한 state에 의존한다.

== 그래서 아주 많은 중첩으로 이루어진 경우 props를 사용하면 더 복잡해질 수도 있다.

== 형제 컴포넌트에서는 이 해결방법이 작동하지 않을 수도 있다.

 

2. 다른 view에서 작업하더라도 동일한 state에 반영해야 할 수도 있다.

== 따라서 반영하기위해서는 직접 부모-자식 인스턴스를 참조해야한다.

== 여러 state의 복사본을 변경하거나 동기화하는 방법을 사용해야한다. 중복소스가 증가한다.

 

이렇게해도 해결 할수는 있지만, 이 방법들의 총체적인 문제는 유지보수가 힘든 코드가 될 수 있다는 점이다.

따라서 컴포넌트에서 어떤 state가 공유되는지 알아내어 이것을 '전역 싱글톤'으로 관리해야 한다.

그래야 모든 컴포넌트에서 state에 접근할 수 있고, state가 변경 될 시 실행할 동작을 트리거할 수 있다.

 

 

◽ Vuex란?

공식문서에서 설명하는 Vuex란 Vue.js 어플리케이션을 위한 상태 관리 패턴 + 라이브러리이다.

어플리케이션의 모든 컴포넌트에 대한 '중앙 집중식 저장소' 역할을 한다.

 

 

 

---

 

 

Vuex의 구성요소

state, getters. mutations, actions 4가지가 있다.

 

◽ state

state란 공통으로 참조하기 위한 변수, 값이다.

// main.js
const app = new Vue({
  el: '#app',
  // "store" 옵션을 사용하여 store를 제공한다.
  // 그러면 모든 하위 컴포넌트에 store instance가 삽입된다.
  store
})

// test.vue
computed: {
	value()  {
    	// this.$store로 state를 가져올 수 있다.
    	return this.$store.state.count
    }
}

 

 

◽ getters

export const getters = {
    isLogined(state) {
        // 현재 로그인 상태인지 확인 (true/false)
        return !!state.user;
    },
    getAccount(state) {
        // 회원정보 불러오기
        return state.account;
    },
};

 

 

◽ mutations

state를 변경하는 것으로, 변경할 때는 mutation를 통해야 한다.

동기로 처리된다.

export const mutations = {
	currentUser(state, payload) {
		state.value = payload;
	},
    
	// { }로 묶어서 받을 수도 있다.
	currentUser(state, {data1, data2}) {
		// 처리
	}
};

 

 

◽ actions

mutation을 실행시킨다.

비동기로 처리되기 때문에 주로 then()을 사용하여 콜백함수로 주로 작성한다.

• { rootState } : rootState
• { state } : state
• { commit } : mutations에 접근하여 state에 값을 반영한다.
• { dispatch } : actions의 함수를 호출한다.

export const actions = {
	async actionA ({ commit }) {
		commit('gotData', await getData())
	},
	async setAccount({ commit, dispatch }, params) {
		await dispatch('actionA', params.uid);
		commit('currentUser', await params);
	},
}

 

 

 

 

출처 및 참조

[공식문서] Vuex - 한글번역

🌟 https://uxgjs.tistory.com/149