Vuex 8.mapState, mapGetters

개요

mapState

• Vuex 에 선언된 state 에 더 쉽게 접근시켜주는 방법이다.
• 객체 전개 연산자로 선언된 Helper 들은 하나의 함수 이다.
• computed() 속성과 연계된다.
• 컴포넌트에서 해당 Helper 를 다른 이름으로 쓰고 싶다면 object로 속성을 받아온다.

//사용.vue

import {mapState} from 'vuex'

computed: {
	//num() { return this.$store.state.num }
	...mapState(['num']) // Array literal
}

///template

<!-- this.$store.state.num -->
<p>{{ this.num }}</p>


//다른이름으로 받고 싶다.

computed: {
	...mapState({
    	name: 'num'
    })
}

 

 

mapGetters

• Vuex 에 선언된 getters 에 더 쉽게 접근시켜주는 방법이다.
• 객체 전개 연산자로 선언된 Helper 들은 하나의 함수 이다.
• computed() 속성과 연계된다.
• 컴포넌트에서 해당 Helper 를 다른 이름으로 쓰고 싶다면 object로 속성을 받아온다.

//사용.vue

import {mapGetters} from 'vuex'

computed: { ...mapGetters(['reverseMessage']) }

//store.js
getters : {
	reverseMessage(state) {
    	return state.msg.split('').reverse().join('');
    }
}

///template

<!-- <p> {{ this.$store.getters.reverseMessage }} </p> -->
<p> {{ this.reverseMessage }}</p>


//다른 이름으로 받고 싶다.

computed: {
	...mapGetters({
    	name : 'reverseMessage'
    })
}

 

---

사용

• 가독성이 굉장히 향상됨

<template>
<!--   name = 클래스명 tag = HTML 태그 -->
<transition-group name="list" tag="ul">
    <li v-bind:key="index" v-for="(todoItem, index) in this.storedTodoItems" class="shadow">
      <i v-on:click="toggleComplete(todoItem,index)" v-bind:class="{checkBtnCompleted: todoItem.completed}" class="checkBtn fas fa-check"></i>
      <span v-bind:class="{textCompleted: todoItem.completed}">{{todoItem.item}}</span>
      <span class="removeBtn" v-on:click="removeTodo(todoItem,index)">
        <i class="fas fa-trash"></i>
      </span>
    </li>
  </transition-group>
</template>

<script >
import {mapGetters} from 'vuex'

export default {
  computed: {
    // storedTodoItems(){
    //   return this.$store.getters.storedTodoItems;
    // }
    ...mapGetters({storedTodoItems : 'storedTodoItems'}),
  },