[VUE + TYPESCRIPT] store module 분리하기

VUE.JS 목록

 

$ mkdir src/store
$ touch src/store/store.ts

import Vue from 'vue';
import Vuex, {StoreOptions} from 'vuex';
import moduleA from './moduleA.store';
import moduleB from './moduleB.store';

Vue.use(Vuex);

export interface RootState {
    data: string;
}

const store: StoreOptions<RootState> = {
    modules: {
        moduleA,
        moduleB,
    },
    state: {
        data: 'root',
    },
    mutations: {
        setData(state, data: string) {
            state.data = data;
        },
    },
    actions: {
        setRootData({commit}, data: string) {
            commit('setData', data);
        },
    },
    getters: {
        data: (state) => state.data,
    },
};

export default new Vuex.Store(store);

 

$ touch src/store/moduleA.store.ts

moduleA.store.ts 파일을 생성하고 아래와 같이 코딩합니다.

import {Module} from 'vuex';
import {RootState} from '@/store/store';

interface ModuleA {
    data: string;
}

const module: Module<ModuleA, RootState> = {
    namespaced: true,
    state: {
        data: '',
    },
    mutations: {
        setData(state: ModuleA, data: string) {
            state.data = data;
        },
    },
    actions: {
        setRootData({commit}, data: string) {
            commit('setData', data);
        },
    },
    getters: {
        data: (state: ModuleA) => state.data,
    },
};

export default module;

 

$ touch src/store/moduleB.store.ts

moduleB.store.ts파일을 생성하고 아래와 같이 코딩합니다.

import { Module, ActionContext } from 'vuex'
import { RootState } from '.'

interface ModuleB {
    data: string;
}

const module: Module<ModuleB, RootState> = {
    state: {
        data: '',
    },
    mutations: {
        setData(state: ModuleB, data: string) {
            state.data = data;
        },
    },
    actions: {
        setRootData(ctx: ActionContext<State, RootState>, data: string) {
            ctx.commit('setData', data);
        },
    },
    getters: {
        data: (state: ModuleB) => state.data,
    },
};

export default module;

 

src/veiws/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    {{ moduleStore.data }}
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({})

export default class Home extends Vue {
    get moduleStore () {
      return this.$store.state.moduleA
    }
  
    created() {
        this.$store.dispatch('setRootData', 'test');
    }
}
</script>

 

main.ts

...
import store from './store/store';
...

main.ts 파일에서 store파일의 경로를 변경합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store/store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

 

 

VUE.JS 목록