vuex4 미리 살펴보기

katanazero86·2020년 5월 25일
1

vue

목록 보기
5/5

vuex 란?

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

vuex 4 맛보기

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 정식버전에 이러한 기능들이 그대로 추가될지는 모르겠다)

예제코드😄

profile
developer life started : 2016.06.07 ~ 흔한 Front-end 개발자(현재는 백수 얏호👻)

0개의 댓글