5-2 getters

getters对state中的数据进行再处理,类似于计算属性

一、设置getters

export default new Vuex.Store({
  state: {
    count:0
  },
  ...
  getters:{
    myCount(state){
      return `当前计数为:${state.count}`
    }
  }
})

二、获取getters中的数据

2-1 直接获取

<h3>{{this.$store.getters.myCount}}</h3>

2-2 mapGetters

<template>
  <div class="home">
    <h1>首页</h1>
    <h2>{{count}}</h2>
    <h3>{{myCount}}</h3>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex';
export default {
  name: 'home',
  computed:{
    ...mapState(['count']),
    ...mapGetters(['myCount'])
  }
}
</script>