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

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

vue cli를 실행하기 위해서는 우선적으로 node.js가 설치되어 있어야합니다.
node.js에서 제공하는 npm도구를 사용하고 vue cli를 시작할 수 있습니다.

- 노드js 설치후 버전 확인하기

# node -v

- 노드 설치후 Vue CLI 홈페이지에 따라서 설치
https://cli.vuejs.org/guide/installation.html

- 노드js를 통한 vue 설치

# npm install -g @vue/cli

- vue 버전 확인하기

# vue --version

- vue 프로젝트 생성

# vue create new-cli-project

1) Manually select reatures 선택
2) 필요한 개발 환경 선택
* Basic
* Router
* Vuex

3) history mode 사용 Yes
4) package.json 선택
5) 위 개발환경 저장?? n
6) 프로젝트 생성

- 생성 폴더 이동

# cd [생성 폴더 경로]

- 프로젝트 실행

# npm run serve