구르는 돌에는 이끼가 끼지 않는다

vuex 사용하기

vuex 기능 중 하나는 store.js에 저장된 getters나 state 값을 다른 컴포턴트에서 사용가능하게 한다.

//store.js파일 
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'}
    ]
  },
  getters:{ 
    allUsersCount: state => {
      return state.allUsers.length      
    },
    countOfSeoul: state =>{
      let count = 0
      state.allUsers.forEach(user => {
        if(user.address === 'Seoul') count++
      })
      return count
    },
    percentOfSeoul: (state, getters) => {
      return Math.round(getters.countOfSeoul/getters.allUsersCount * 100)
    }
  }

store.js파일을 자식 컴포넌트에서 사용할 수 있도록 하기 위해서는 다음 코드를 추가합니다.

import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      
    }
  },
  computed:{
    ...mapGetters({
      count : 'allUsersCount', 
      seouls : 'countOfSeoul',
      percent : 'percentOfSeoul'
    }), 
    ...mapState(['allUsers'])
  },
  
  ...

위와 같이 store.js에 있는 getter, state에 정의된 값을 사용하기위해서는 import를 추가합니다. 그리고 computed를 내에 ...mapGetters, ...mapState function을 이용하여 store.js에 정의 된 값을 사용하고, ...mapGetters내에서 해당 값을 key 값으로 새롭게 정의 가능합니다.

  <h1>All Users({{ count }})</h1>
    <h1>Seoul Users : {{ seouls }} ({{ percent }}%)</h1>
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in allUsers"
        :key="index"
        avatar
      >

DOM 태그 부분에서는 최종적으로 vuex를 사용해서 가져온 값을 바인딩 시켜줍니다.

[출처]

맨땅에 개발하기

https://www.youtube.com/watch?v=wKMQ0EmpyBo&list=PLZzSdj89sCN292abcbI3utND8pA1T1OyB&index=6