getter, mapGetters, mapState (vuex)

보통의 store의 state값을 불러와서 사용할 때

v-for="(user, index) in allUsers"
v-for="(user, index) in $store.state.allUsers"
...
mounted() {
  EventBus.$on('signUp', users => {
    this.$store.state.allUsers.push(users)
  })
}

기존 data => store의 state로 옮김

 

 

getter

<h1>All Users{{ $store.state.allUsers.length}}</h1>

ex) 여러개의 컴포넌트에 모든 유저의 수를 출력해야 하는 경우

반복되는 코드를 computed속성과 비슷한 getter을 이용해서 코드를 줄일 수 있다.

export default new Vuex.Store({
  state: {//데이터
    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'}
    ]
  },
  getter:{
    //allUsersCount: function(state){ // 어떠한 값을 쓸건지 인자로 선언해준다.
    //  return state.allUsers.length
    //}
    allUsersCount: state => { 
      return state.allUsers.length
    }
  },
})

computed와 다른점은 사용할 것을 인자값으로 알려줘야 한다. 

복잡한 계산식인 경우 유용하게 사용할 수 있다. 

<h1>All Users{{ $store.getter.allUsersCount}}</h1>

 

---

 

mapping getter

 

<h1>All Users{{ $store.getter.allUsersCount}}</h1>
<h1>Seoul Users{{ $store.getter.countOfSeoul}} ({{$store.getter.percentOfSeoul}})</h1>

...

//store.js
export default new Vuex.Store({
  state: {//데이터
    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'}
    ]
  },
  getter:{
    allUsersCount: function(state){
      // 어떠한 값을 쓸건지 인자로 선언해준다.
      return state.allUsers.length
    },
    countOfSeoul: state => {
      let count = 0
      state.allUsers.forEach(user => {
        if(user.address === 'Seoul') count++
      });
      return count
    },
    percenOfSeoul: (state, getters) => {
      return Math.round(getters.countOfSeoul / getters.allUsersCount * 100)
    }
  },
})

 

 

html안에서 반복되는 문구를 줄여주기

 

<script>
import { EventBus } from '@/main.js'
import {mapGetters} from 'vuex'
  export default {
    data() {
      return {
    },
    computed: {
      ...mapGetters(['allUsersCount', 'countOfSeoul', 'percentOfSeoul'])
    },
    mounted() {
      EventBus.$on('signUp', users => {
        this.$store.state.allUsers.push(users)
      })
    }
  }
</script>

 

1. 사용하려는 컴포넌트 안에서 from vuex인 mapgetter를 import 해온다.

2. 약속처럼 사용하는 형태 computed안에 앞에 ... 과 array형태로 적어줘야 한다. 

3. computed에 만들었던 methods를 스트링 형태로 넣어준다. 

    <h1>All Users{{ allUsersCount}}</h1>
    <h1>Seoul Users{{ countOfSeoul}} ({{percentOfSeoul}}%)</h1>

 

 

* 만약 mapGetters안에 다른 이름을 지정할 때

<h1>All Users{{ count}}</h1>
<h1>Seoul Users{{ seouls}} ({{percent}}%)</h1>
...

//store.js
computed: {
  ...mapGetters({
    count: 'allUsersCount',
    seouls: 'countOfSeoul',
    percent: 'percentOfSeoul'
  })
  // ...mapGetters(['allUsersCount', 'countOfSeoul', 'percentOfSeoul'])
},

 

 

 

mapGetters와 마찬가지로 mapState도 사용할 수 있다. 

<script>
import { mapState } from 'vuex'
  export default {
    data() {
      return {
      }
    },
    computed: {
      ...mapGetters({
        count: 'allUsersCount',
        seouls: 'countOfSeoul',
        percent: 'percentOfSeoul'
      }),
      // ...mapGetters(['allUsersCount', 'countOfSeoul', 'percentOfSeoul'])
      ...mapState(['allUsers'])
    },
  }
</script>

 

그럼 이렇게 변경이 된다. 

<v-list-tile v-for="(user, index) in $store.state.allUsers":key="index" avatar>
▼
<v-list-tile v-for="(user, index) in allUsers":key="index" avatar>