Vuex Getters

저장소 상태(State)를 계산된 상태로 사용할 경우 Getters를 사용할 수 있습니다.

getters 속성은 Vue의 computed 속성과 비슷합니다.

모든 과일 이름을 대문자로 표시하고자 합니다.
fruits 데이터의 name 속성 정보를 대문자로 표시하도록(‘- 과일이름’) 다음과 같이 store.js을 수정합니다.

state의 fruits (배열)데이터를 map 메소드로 반복 처리합니다.
upperCaseFruits 속성의 인자로 state를 전달하여 내부에서 사용할 수 있습니다.

// store.js
// ...

export const store = new Vuex.Store({
  state: {
    fruits: [
      // ...
    ]
  },
  getters: {
    upperCaseFruits: state => {
      return state.fruits.map(fruit => {
        return {
          name: `- ${fruit.name.toUpperCase()}`  // ES6 - Template Strings
        }
      });
    }
  }
});

getters에서 설정한 upperCaseFruits를 과일 이름 목록 컴포넌트(FruitsList.vue)에서 사용합니다.

<!--FruitsList.vue-->
<template>
  <div id="fruits-list">
    <h1>Fruits Name</h1>
    <ul>
      <li v-for="fruit in upperCaseFruits">
        {{ fruit.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    computed: {
      fruits() {
        return this.$store.state.fruits;
      },
      upperCaseFruits() {
        return this.$store.getters.upperCaseFruits;
      }
    }
  }
</script>

<style></style>

과일 이름 목록이 대문자로 바뀌고 각 이름 앞에 - 기호가 추가되었습니다.

다른 컴포넌트에서의 활용 등 최적화된 저장소 사용을 위해 다음과 같이 저장소 상태(State)를 computed에서 직접 계산하지 않도록 주의하세요!

<!--FruitsList.vue-->
<template>
  <div id="fruits-list">
    <h1>Fruits Name</h1>
    <ul>
      <li v-for="fruit in upperCaseFruits">
        {{ fruit.name }}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    computed: {
      fruits() {
        return this.$store.state.fruits;
      },
      // Bad case!
      upperCaseFruits() {
        return this.$store.state.fruits.map(fruit => {
          return {
            name: `- ${fruit.name.toUpperCase()}`
          }
        });
      }
    }
  }
</script>

<style></style>