각 속성들을 더 쉽게 사용하는 방법 - Helper

Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법

- state -> mapState

- getters -> mapGetters

- mutations -> mapMutations

- actions -> mapActions

 

인프런 - vue.js 강의 캡틴판교

 

인프런 - vue.js 강의 캡틴판교

인프런 - vue.js 강의 캡틴판교

 

store.js

export const store = createStore({
    state: {
        todoItems : storage.item()
    },
    getters: {
        storedTodoItems(state){
            return state.todoItems
        }
    },

 

list.vue

          <li v-for="(todoItem,i) in this.$store.getters.storedTodoItems" v-bind:key="i"
            class="shadow">{{ todoItem.item }}

this.$store.getters.storedTodoItems 로도 접근이 가능하다.

 

뷰 확장도구에도 잡힌다. 하지만 이렇게 하면 안된다. 되기도 하지만

 

          <li v-for="(todoItem,i) in this.todoItems" v-bind:key="i"
            class="shadow">{{ todoItem.item }}
            
            ...
            
   computed : {
      todoItems(){
        return this.$store.getters.storedTodoItems
      }
    }

이렇게 computed에 함수를 만들어서 사용하는 것이 vue에서 권고하는 방식이다. 템플릿 안에서 표현하는 것은 자바스크립트 연산 등의 방식은 포함하지 않는 것이 좋다. 최대한 깔끔히 써야하며, 연산등은 스크립트 안에서 끝내는 것이 좋음

 

이제 mapGetters를 사용해보자

 

          <li v-for="(todoItem,i) in this.storedTodoItems" 
              v-bind:key="i"
              class="shadow">{{ todoItem.item }}
              
              ...
              
              <script>
import { mapGetters } from 'vuex'

..

    computed : {
      // todoItems(){
      //   return this.$store.getters.storedTodoItems
      // }
      ...mapGetters(['storedTodoItems'])

 

같은 이름으로 접근이 가능함

 

...mapGetters({})는 언제 쓰느냐?