vuex 的基本使用(五) Getter的两种使用方式

Getter用于对store中的数据进行加工处理形成新的数据 类似 vue 的计算属性
store 中数据发生变化 getter的数据也会跟着变化

...引入省略
// 定义getter
state: {
  count: 0
},
getters:{
 showNum:state=>{
    return `当前最新的数量是【${state.count}】`
  }
}

使用 getters 的第一种方式

this.$store.getters.名称
// <h3>{{$store.getters.showNum}}</h3>

使用 getters 的第二种方式
在要使用的页面

// 引入
import {mapGetters} from 'vuex'
computed: {
    ...mapGetters(['showNum])
}
// <h3>{{showNum}}</h3>