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));
				});
			});
		},
	},
};