vuex4 미리 살펴보기

vuex 란?

• vue 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
• 왜 사용해야해? 초기에 작은 애플리케이션인 경우에는 문제가 없지만 점점 컴포넌트가 중첩(nested)이 되고 깊이(depth)가 늘어나면 이런 컴포넌트들 사이에 상태를 주고받고 관리하기가 힘들어짐(props 로 무한정 내려줄것도 아니고, emit 으로 계속 올려줄거도 아닌..ㅠㅠ)

vuex 4 맛보기

• 참조

  https://forum.vuejs.org/t/vuex4-usestore-returns-undefined-in-some-cases/96026
  https://github.com/u3u/vue-hooks
  https://unpkg.com/browse/vuex@4.0.0-beta.2/

npm install --save vuex@4.0.0-beta.2

• vuex store 객체 생성

// /store/index.js

import { createStore } from 'vuex';
// 기존 import Vuex from 'vuex';

import calculator from './modules/calculator/index';

export const store = createStore({

    strict : false,
    modules : {
        calculator
    },

    // root state
    state () {
        return {
            rootTest: 'rootState',
            rootName: 'rootNameState',
            mapRootStateValue : 'test mapState',
        }
    }
});

• createStore 메서드를 통해 새로운 store 를 생성한다.

• 예제로 작성한 vuex module

// /store/modules/calculator/index.js

// state
export const state = ({
    resultNumber : 0,
});


// action
export const actions = {
    // eslint-disable-next-line no-unused-vars
    resultNumberAction({commit, dispatch} , payload) {
        commit(`setResultNumber`, payload);
    },
};


// mutation
export const mutations = {
  setResultNumber(state, payload) {
        state.resultNumber = payload.resultNumber;
  },
};

// getter
export const getters = {
    // eslint-disable-next-line no-unused-vars
    resultNumber(state, getters, rootState) {
        return state.resultNumber;
    },

    rootState(state, getters, rootState) {
        return rootState.rootTest;
    }
};


export default {
    namespaced: true,
    state,
    actions,
    mutations,
    getters
}

• 이 부분은 크게 변화가 없다.

• vuex 스토어 연결👻

import { createApp } from 'vue';
import App from './App.vue';

// vuex
import { store } from './store/index';

const app = createApp(App);
app.use(store);

// createApp(App).mount('#app');
app.mount(`#app`);

• 실제 컴포넌트에서 사용해보기(vue3 composition API 기준)

// /src/components/HelloStore.vue

<template>
    <div style="border: 1px dotted cornflowerblue; padding: 6px">
        <input type="number" min="0" v-model="tNumber1"/>
        <input type="number" min="0" v-model="tNumber2">
        <button @click="addNumber(tNumber1, tNumber2)">
            더하기
        </button>
        <div>
            <span style="color: #2c3e50; font-weight: 600">결과 : {{resultNumberComputed}}</span> <br/>
            rootState 테스트용 : {{rootTestComputed}} <br/>
            <p>rootName 테스트용 : {{rootName}}</p>
            <p>rootName 테스트용2 : {{store.state.rootName}}</p>
            <p>mapRootStateValue : {{mapRootStateValue}}</p>
            <button @click="store.state.rootName = 'zero86'">
                rootName 테스트용 값 변경
            </button>
        </div>
    </div>
</template>

<script>

    import {ref, computed} from 'vue';
    import {useStore} from 'vuex';

    // const store = useStore(); // 이런식으로 사용하면 store 에 undefined 가 정의되어 있어서 사용불가

    const targetNumber1 = () => {
        const targetNumber1 = ref(0);
        return [targetNumber1];
    };

    const targetNumber2 = () => {
        const targetNumber2 = ref(0);
        return [targetNumber2];
    };

    export default {
        name: "HelloStore",

        setup() {
            // 기존 this.$store 에서 변경이 되었다.
            const store = useStore(); // 스토어 호출

            const [tNumber1] = targetNumber1();
            const [tNumber2] = targetNumber2();

            const mapRootStateValue = computed(() => {
                return store.state.mapRootStateValue;
            });

            const resultNumberComputed = computed(() => {
                return store.getters[`calculator/resultNumber`];
            });

            const rootTestComputed = computed(() => {
                return store.getters[`calculator/rootState`];
            });

            const addNumber = (tNumber1, tNumber2) => {
                console.log(store);
                const resultNumber = tNumber1 + tNumber2;
                store.dispatch(`calculator/resultNumberAction`, {resultNumber});
            };

            return {
                tNumber1,
                tNumber2,
                addNumber,
                resultNumberComputed,
                rootTestComputed,
                rootName : store.state.rootName, // not reactive
                store,
                mapRootStateValue
            }

        }

    }
</script>

• useStore 를 통해 스토어에 접근 및 제어가 가능하다.(기존에는 글로벌하게 $store 가 있던반면에 vuex4 에서는 글로벌하지가 않다)
• helper 함수를 사용해보려고 했으나, 정상적으로 동작하지 않는다. https://vue-hooks.netlify.app/?path=/story/usestate--docs 이 사이트에서 제공되어지는 hooks 는 추가로 모듈을 설치하여야하는거 같다(vuex 정식버전에 이러한 기능들이 그대로 추가될지는 모르겠다)

예제코드😄

• https://github.com/katanazero86/vue3-study