Vuex Strore 를 바인딩 하는 방법

2022. 5. 26. 09:55·Front-end

현재 프로젝트에서 사용중인 방법

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

'Front-end' 카테고리의 다른 글

Nuxt3 와 Vue3 비교  (0) 2025.03.20
React 에서 상태 관리 방법 목록  (0) 2025.03.11
Card 라는 component 를 만들기  (0) 2025.02.28
구글 login 구현하기 위한 Pinia store 정의  (0) 2025.02.28
Nuxt.js 란?  (0) 2018.04.03
'Front-end' 카테고리의 다른 글
  • React 에서 상태 관리 방법 목록
  • Card 라는 component 를 만들기
  • 구글 login 구현하기 위한 Pinia store 정의
  • Nuxt.js 란?
크레비즈
크레비즈
  • 크레비즈
    크레비즈 커뮤니티
    크레비즈
  • 전체
    오늘
    어제
    • 분류 전체보기 (68)
      • Front-end (13)
      • Back-end (7)
      • Python (11)
      • AI 공부 (7)
      • Mobile (4)
      • Script (4)
      • 인프라 (5)
      • 참고할 내용 (12)
      • reference page (0)
      • Project (3)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

    • Spring: the source for modern java
  • 공지사항

    • 크레비즈 커뮤니티
  • 인기 글

  • 태그

    PYTHON
    vuejs
    fastapi
    Claude
    ChatGPT
    vue
    딥러닝
    토큰
    claude 3.7 sonnet
    CNN
    Gemini
    Access Token
    windsurf
    claude sonnet
    Refresh Token
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
크레비즈
Vuex Strore 를 바인딩 하는 방법
상단으로

티스토리툴바