Vuex简单入门4：getters属性

1. store.js中加入getters ,并且添加count方法，同时要把getters放入store中，代码如下

const getters = {
  count: (state) => (state.count += 100)
}
export default new Vuex.Store({
  state,
  mutations,
  getters
})

2. 在count.vue组件中的计算属性中获取store中的getters

上一步中计算属性 computed中已经添加了mapState

computed: mapState(['count']),

这就用到ES6中的扩展运算符...

computed: {
  ...mapState(['count']),
  count () {
    return this.$store.getters.count
  }
},

这是直接取count方法。

同样，也有更简洁的写法，下面改进一下

首先，在上面import  mapGetters 。

import {mapState, mapMutations, mapGetters} from 'vuex'

然后，在计算属性中同样的用扩展运算符

computed: {
  ...mapState(['count']),
  ...mapGetters(['count'])
},