Vuex

배경

Vuex는 Vue.js 애플리케이션을 위한 ‘상태 관리 패턴 + 라이브러리’ 입니다.

상태 관리 패턴(State management pattern)

• state: 앱을 동작하게하는 진실의 근원(the source of truth that drives our app)
• view: state의 선언적 매핑(a declarative mapping of the state)
• actions: view에서 사용자 입력에 대한 반응으로 state가 변경될 수 있는 가능한 방법(the possible ways which the state could change in reaction to user inputs from the view) 위의 단어들이 ‘one-way data flow’의 개념의 간단한 표현입니다.

하지만, 이 개념은 우리가 공통 state를 공유하는 여러 컴포넌트들이 있다면 의미가 없어집니다. 여러 view는 같은 state에 의존하고, 서로 다른 view에서의 action은 같은 state를 변경해야 할 수도 있습니다. 이 때 문제가 발생합니다.

1. props의 전달은 깊이 중첩된 컴포넌트에 의해 시간이 길어질 수 있고, 형제 컴포넌트 사이에서는 동작하지 않습니다.
2. 직접적인 부모/자식 인스턴스 참조에 도달하거나 이벤트를 통해 state의 여러 복사본을 변경하고 동기화하려고 시도하는 것과 같은 솔루션에 의존합니다.

여기서 의문이 생깁니다. 왜 컴포넌트에서 공유되는 state를 추출해 전역 싱글톤에서 관리하지 않는가? 이렇게 된다면 우리의 컴포넌트 트리는 큰 view가 될 것이고, 어떤 컴포넌트가 트리에서 어디에 있던지 state에 접근하거나 actions를 동작시킬 수 있습니다.

이때 사용하는 것이 Vuex입니다.

Vuex

//store.js
import {createStore} from 'vuex';

const stroe = createStroe({
  state(){return {...};},
  getters:{...},
  mutations: {...}, 
  actions:{...},
  modules:{...}
})

//main.js
import { createApp } from "vue";
import App from "./App.vue";
import store from "./store.js";

let app = createApp(App);
app.use(store);
app.mount("#app");

컴포넌트에서 사용하는 방법으로는 2가지 방법이 있습니다.

1. import store from ‘./store.js’; store.state
2. this.$store.state

Vuex의 기본 아이디어는 Flux, Redux, The Elm Architecture에서 영감을 받았다고 합니다.

참고 사이트

Youtube-Vuex tutorial
Official-Vuex