[Vuex] state

state

📌 state는 데이터 저장하는 역할

// store/index.js
state: {
  allUsers: [
    { userId: 'abcd', passsword: '123', address: 'Seoul' },
    { userId: 'efgh', password: '456', address: 'Seoul }
  ]
}

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

// components/xxx.vue
<template>
  <div>
    <h1>All Users {{ $store.state.allUsers.length }}</h1>
  </div>
</template>

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

mapState

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

📌 mapState 사용하는 방법

1. components/xxx.vue에 import

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

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

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

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

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