Vuex 기초배우기 #3 (getters)

getters는 computed

 

 

 

 

Vuex와 같은 중앙통제 저장소를 사용하면 발생하는 흔한 문제점 중 하나는
컴포넌트에서 vuex로 데이터를 접근할 때 중복된 코드를 반복 사용하게 된다는 것이다

 

가령 예를들어 각 컴포넌트마다 유저의 수를 표시하고 싶다면

 

{{ $store.state.allUsers.length }}

이런 식으로 접근하면 된다.

 

문제는 컴포넌트를 생성할 때마다 같은 코드를 계속 적어주어야 한다는 것이다.

 

 

 

지금의 예제는 굉장히 단순한 계산식을 적어놨지만 코드가 복잡해질수록 곤란하게 여겨질 것이다.

 

vue에서는 반복된 코드를 줄여주고 캐싱해주는 computed가 있지만 이것은 각각의 컴포넌트에서 적용이 된다.

 

 

 

store에서 computed의 역할을 해주는 것이 getters이다.

 

 

src/store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    //data
    allUsers: [
      {
        userId: "hoza123",
        password: "123",
        name: "Hoza",
        address: "Seoul",
        src: "https://goo.gl/oqLfJR",
      },
      {
        userId: "max123",
        password: "456",
        name: "Max",
        address: "Berlin",
        src: "https://goo.gl/Ksk9B9",
      },
      {
        userId: "lego123",
        password: "789",
        name: "Lego",
        address: "Busan",
        src: "https://goo.gl/x7SpCD",
      },
    ],
  },
  getters: {
    allUsersCount: (state) => {
      return state.allUsers.length;
    },
  },
  mutations: {},
  actions: {},
});

state 아래 getters를 적어주고 계산하고자 하는 식을 작성하여 준다.
이때, state에 있는 allUsers의 배열 길이를 알고자 하기 때문에
인자로 state를 받아와야 한다

 

 

src/components/Users/AllUsers.vue

<template>
  <div>
    <h1>All Users({{ $store.getters.allUsersCount }})</h1>
    <v-list two-line>
      <v-list-tile
        v-for="(user, index) in $store.state.allUsers"
        :key="index"
        avatar
      >
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src" />
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title
            >id:#{{ index }} / {{ user.address }} 거주</v-list-tile-sub-title
          >
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </div>
</template>

getters의 함수에 $store.getters.allUsersCount로 접근하였다.
어느 컴포넌트에서든지 같은 방식으로 접근이 가능해졌다.

 

 

getters와 computed의 차이점은

 

getters에서 다른 store의 데이터들로 접근하기 위해서는 반드시 인자로 받아와야 한다는 점이다.