[vue.js] Vuex

1. 리액트의 리덕스 개념이며, 전역으로 데이터 관리를 위해서 사용함. 데이터 관리를 위해 단방향으로 관리하도록 설계되어있다.

 기본적으로 store에 직접 접근하여 state 값을 변경할 수 있으나,(아래와 같이)

<template>
<div id="app">
  Parent counter : {{ $store.state.counter}} 
  <button @click="addCounter">+</button>
  <!-- Child 컴포넌트를 등록하고 counter 데이터 속성을 props 로 전달한다. -->
  <child v-bind:passedCounter="$store.state.counter"></child>
</div>
</template>

<script>
import Child from './Child.vue'

export default {

  methods: {
    // 이벤트 추가
    addCounter() {
      this.$store.state.counter++;
    },
    subCounter() {
      this.$store.state.counter--;
    }
  },
  components: {
    // Child 컴포넌트를 하위 컴포넌트로 등록
    'child': Child
  }
}
</script>

그럴 경우 코드의 중복이 많아서 데이터에 접근할 때는 getters을 이용하여, 데이터에 접근한다. 

 

//store.js

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
      counter: 0
  },

  getters: {
    getCounter: function(state){
        return state.counter;
    }
  }
});

이렇게 접근할 수도 있으며,

 computed: {
    parentCounter() {
      return this.$store.getters.getCounter;
    }
  },

Vuex의 내장함수인 mapGetters을 이용해서 가독성을 높일 수 도 있다.

  computed: {
    ...mapGetters([
      'getCounter'
    ]),
  },

mutations는 state의 값을 변경하기 위해 사용한다.

(동기식 로직을 사용함, 데이터 수정하는 부분이어서 ,추적관리 할 수 있게하기 위함,  액션에서는 비동기 로직사용)

getters와 다르게 mutation에 접근하기 위해서는 commit을 이용해서 접근할 수 있다. 

  //store.js
  ... 생략
  mutations:{
      addCounter: function(state, payload){
          state.counter = payload;
      }
  }

 addCounter() {
      // this.$store.state.counter++;
      this.$store.commit('addCounter',10);
     
    },

내장함수를 이용해서 mapMutations도 사용가능하다.

// App.vue
import { mapMutations } from 'vuex'

methods: {
  // Vuex 의 Mutations 메서드 명과 App.vue 메서드 명이 동일할 때 [] 사용
  ...mapMutations([
    'addCounter'
  ]),
  // Vuex 의 Mutations 메서드 명과 App.vue 메서드 명을 다르게 매칭할 때 {} 사용
  ...mapMutations({
    addCounter: 'addCounter' // 앞 addCounter 는 해당 컴포넌트의 메서드를, 뒤 addCounter 는 Vuex 의 Mutations 를 의미
  })
}

actions은 비동기로직을 이용할 때 사용하며, 접근하기 위해서는 dispatch를 사용한다.

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
      counter: 0
  },

  getters: {
    getCounter: function(state){
        return state.counter;
    }
  },

  mutations:{
      addCounter: function(state, payload){
          return state.counter++;
      }
  },
  actions: {
      addCounter: function(context){
          return setTimeout(function (){
              commit('addCounter');
          }, 3000);

      }
  },

});

actions에서 값을 변경시키려면 결국에는 mutations을 거쳐야 하기때문에 commit을 통해 값을 변경시킨다.

 methods: {
    addCounter() {
      this.$store.dispatch('addCounter');
    },
 }   

mutation이나, action도 인자값을 넘길 수있고, 객체형식으로 여러값을 받을 수 도 있다.

action도 내장메서드인 mapAction을 사용가능하다.

Vuex flow

정리를 하면 컴포넌트에서 스토어에 있는 값을 변경하고 싶을때는 직접 접근하는 방식도 있으나, 중복성과 가독성을 위해 

mutation과 action을 이용해서 값을 변경시킨다. mutation은 동기식 로직을, action에는 비동기 로직을 작성한다.

action을 이용하려면, dispatch로 접근할 수 있고, mutation을 이용하려면, commit으로 접근 할 수 있다.

값을 수정하려면 mutation을 반드시 거쳐야한다.  변경된 데이터값을 조회하려면 getters을 이용하여 접근할 수 있다.

Vuex 내장함수를 이용하여(mapGetters, mapMutations, mapActions) 가독성을 높일 수 있다.

 

참고자료 : https://www.manning.com/books/testing-vue-js-applications#toc

Testing Vue.js Applications

https://joshua1988.github.io/web-development/vuejs/vuex-start/