[Vuex] getters

getters

📌 computed가 가진 반복된 구문을 줄여주는 기능

// store/index.js
state: {
  allUsers: [
    { userId: 'abcd', passsword: '123', address: 'Seoul' },
    { userId: 'efgh', password: '456', address: 'Seoul }
  ]
},
getters: {
  //state를 넘겨줘야한다.
  allUsersCount: state => {
    return state.allUsers.length	
  }
}

📌 getters의 데이터를 vue 파일에서 불러서 사용하는 방법

// components/xxx.vue
<template>
  <div>
  	// state에서 바로 불러와서 사용
    <h1>All Users {{ $store.state.allUsers.length }}</h1>
    
    // getters에서 불러와서 사용
    <h1>All Users {{ $store.getters.allUsersCount }}</h1>
  </div>
</template>

📌 getters의 값 안에서 getters의 값을 참조하는 방법

// store/index.js
getters: {
  //state를 넘겨줘야한다.
  allUsersCount: state=> {
    return state.allUsers.length	
  },
  // 반드시 state를 써줘야 getters를 인자로 사용가능하다
  percentOfSeoul: (state, getters) => {
    return Math.round(getters.countOfSeoul / getters.allUsersCount * 100)
  }
}

❗ 그런데 $store.getters가 계속 반복되므로 불편할 수 있다.
이 반복을 줄여주기위해 mapGetters를 사용할 수 있다.

mapGetters

📌 store/index.js의 getters에 선언되어있는 값들을 사용하고자 하는 components/xxx.vue 내로 간단하게 불러주는 역할

📌 mapGetters 사용하는 방법

1. components/xxx.vue에 import

// components/xxx.vue
<script>
  import { mapGetters } from 'vuex'
</script>

2. components/xxx.vue의 인스턴스 내 mapGetters 선언 후 사용

// components/xxx.vue
<script>
  import { mapGetters } from 'vuex'
  
  export default {
    data() {
      return {
        computed: {
          //mapGetters 선언 후 사용하고자 하는 getters의 값을 인자값 안의 배열안에 적어줌
          ...mapGetters(['allUsersCount', 'percentOfSeoul'])
        }
      }
    }
  }
</script>

3. components/xxx.vue의 템플릿 내에서 사용

// components/xxx.vue
<template>
  <div>
    <h1>All Users {{ allUsersCount }}</h1>
    <h1>All Users {{ percentOfSeoul }}</h1>
  </div>
</template>

4. 만약 allUsersCount 또는 percentOfSeoul를 다른값으로 받고싶다면

// components/xxx.vue
<template>
  <div>
    <h1>All Users {{ count }}</h1>
    <h1>All Users {{ seouls }}</h1>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  
  export default {
    data() {
      return {
        computed: {
          ...mapGetters({
            count: 'allUsersCount',
            percent: 'percentOfSeoul'
          })
          //...mapGetters(['allUsersCount', 'percentOfSeoul'])
        }
      }
    }
  }
</script>