[Vue.js] vue store 모듈화 (feat.vuex)

/store/index.js 에서 관리하는 변수들이 많아지면 관리하기 힘들기때문에

모듈화가 필요하다

각 컴포넌트별로 변수를 사용할수있게 모듈화 해주면 훨씬 개발하기 수월해진다고 한다

​

​

​

기존 index.js ▼

/store/index.js

/* eslint-disable no-plusplus */
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: { // 공통 관리되는 상태값을 관리,  접근방법- this.$store.state.items
    tardy: 0,
  },
  getters: { // 공유되는 상태 값을 조회 로직을 관리, 접근방법 - this.$store.getters['경로명/함수명']
  },
  mutations: { // 상태 값을 변경하는 로직을 관리, 접근방법 - this.$store.commit('경로명/함수명')
    addTardy(state) {
      state.tardy++;
    },
  },
  actions: { // 비동기 통신 및 동작을 정의하고 관리, 접근방법 - this.$store.dispatch('경로명/함수명')
  },
});

 

 

 

컴포넌트에서 접근할때

 

<b-button block variant="success" id="workBtn" @click="addWork()" >출근하기 (지각카운트용)</b-button>
지각횟수 : {{this.$store.state.tardy}} <br>

<script>
export default {
  methods: {
    addWork() {
      this.$store.commit('addTardy');
    },
  },
};
</script>

 

 

화면에는

{{this.$store.state.tardy}}

소스로 현재 변수에 담긴 값을 뿌려주고

버튼을 눌렀을때 클릭이벤트를 이용하여 this.$store.commit('addTardy'); 로 mutation속성에 접근한다

 

 

 

 

모듈화 후 ▼

 

 

test.js생성먼저해주고

​

test.js

/* eslint-disable no-plusplus */
const test = {
  namespaced: true,
  state: { // 공통 관리되는 상태값을 관리,  접근방법- this.$store.state.items
    tardy: 0,
  },
  getters: { // 공유되는 상태 값을 조회 로직을 관리, 접근방법 - this.$store.getters['경로명/함수명']

  },
  mutations: { // 상태 값을 변경하는 로직을 관리, 접근방법 - this.$store.commit('경로명/함수명')
    addTardy(state) {
      state.tardy++;
    },
  },
  actions: { // 비동기 통신 및 동작을 정의하고 관리, 접근방법 - this.$store.dispatch('경로명/함수명')
  },
};

export default test;

 

 

index.js

import Vue from 'vue';
import Vuex from 'vuex';

import test from '@/store/test';

Vue.use(Vuex);

export default new Vuex.Store({
  strict: true,
  modules: { 
    test,
  },
});

 

 

test.js를 import해주고 modules 안에 넣어주면된다

​

그다음 컴포넌트에서 접근해주면되는데

​

​

state에 접근할때에는

$store.state.명시된store 모듈 이름.state값

 

지각횟수 : {{this.$store.state.test.tardy}} <br>

 

 

mutation에 접근할때에는

this.$store.commit('경로명/함수명')

<script>

export default {
  methods: {
    addWork() {
      this.$store.commit('test/addTardy');
    },
  },
};

</script>

 

 

 

 

▼ 잘 동작이 된다