Vuex Actions 사용하기

Overview

Mutations에 비동기 처리 로직들이 포함되면 같은 값에 대해 여러 개의 컴포넌드에서 변경을 요청할 경우, 변경 순서를 파악하기 어렵기 때문에, Actions를 사용해서 비동기 로직을 처리해 줘야 한다. payload를 통해 인자 전달도 가능하다.

store.js

export const store = new Vuex.Store({
  state: {
    period: '',
    products:[
      {name:'사과', price:5000},
      {name:'바나나', price:4000},
      {name:'포도', price:6000}
    ]
  },
  getters:{
    saleProducts:state => {
      var saleProducts = state.products.map( product => {
        return {
          name:"**"+product.name+"**",
          price:product.price/2
        }
      });
      return saleProducts;
    }
  },
  mutations:{
    reducePrice:(state, payload) => {
      state.products.forEach(product => {
        product.price -= payload;
      })
    }
  },
  actions:{
    reducePrice:(context, payload) =>{
      setTimeout(function(){
        context.commit('reducePrice', payload)
      }, 2000)
    }
  }
})

component.js

<template>
  <div class="container">
    <app-search></app-search>
    <app-filter-by-period></app-filter-by-period>
    <div><br> Parents counter : {{ this.$store.state.period }} <br></div>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{ product.name }}</span>
        <span class="price">{{ product.price }}</span>
      </li>
    </ul>
    <button v-on:click="reducePrice(4)">
      Reduce Price
    </button>
  </div>
</template>

<script>
import SearchBar from '../components/shelter/SearchBar'

export default {
  computed:{
    products(){
      return this.$store.state.products;
    },
    saleProducts(){
      return this.$store.getters.saleProducts;
    }
  },
  methods:{
    reducePrice:function(amount){
      this.$store.dispatch('reducePrice', amount);
    }
  },
  components: {
    'app-search': SearchBar,
  }
}
</script>