Vuex getters 사용하기

Overview

Getters 속성은 Store에서 가져온 데이터를 가공하여 다양한 컴포넌트에서 사용하고 싶을 경우, 데이터를 가공하는 과정의 중복을 없애기 위해 필요한 속성이다.

store.js

...

export const store = new Vuex.Store({
  state: {
    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;
  	}
  }
})

component.js

<template>
  <div class="container">
    <app-search></app-search>
    <ul>
      <li v-for="product in saleProducts">
        <span class="name">{{ product.name }}</span>
        <span class="price">{{ product.price }}</span>
      </li>
    </ul>
  </div>
</template>

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

export default {
  computed:{
    saleProducts(){
      return this.$store.getters.saleProducts;
    }
  },
  components: {
    'app-search': SearchBar,
  }
}
</script>