Front-end
Vuex Strore 를 바인딩 하는 방법
크레비즈
2022. 5. 26. 09:55
현재 프로젝트에서 사용중인 방법
vue
Vuex 에서 제공하는 createNamespacedHelpers 를 사용
import { createNamespacedHelpers } from ‘vuex’;
const { mapState, mapActions } = createNamespacedHelpers(‘admin/abc0101’);
export default {
methods: {
...mapActions([
‘selectCodeList’,
‘selectProjectList’,
]),
this.getProjectList(params).then( () => {});
},
computed: {
...mapState([
‘dsCodeList’,
‘dsProjectList’
]),
},
}
js
모듈별로 js파일 구분
import Vue from ‘vue’;
import Vuex from ‘vuex’;
import { ADM } from ‘../admin’;
const initialState = {
dsProjectList: []
}
export default {
namespaced: true,
state: { ...initialState },
mutations: {
setProjectList: (state, payload) => {
state.dsProjectList = payload;
},
},
actions: {
getProjectList: ( { commit }, payload ) => {
return new Promise(resolve => {
return post(ADM.selectProjectList, payload, res => {
resolve(commit(‘setProjectList’, res.data.projectList));
});
});
},
},
};