vuex概念之State用法详解

假设有如下state定义

一、普通用法

在组件中直接访问:

this.$store.state.count

二、mapState辅助函数用法1

使用对象展开运算符，会默认传递参数state，在函数中直接使用就可以了。这样就可以少些2个单词了(this.$store)

...mapState({
  count: state => state.count
})

三、mapState辅助函数用法2

为了能够使用 `this` 获取组件自己的data数据，必须使用常规函数

...mapState({
      count: function (state) {
        return state.count + this.localCount
      }
    }),

四、mapState辅助函数用法3

当在计算属性中直接引用state的数据时，可以直接传递字符串数组。

...mapState([
      'count'
    ])

这种写法就相当于上面的《mapState辅助函数用法1》

五、mapState的这几种用法可以混合使用

在计算属性中，可以根据实际需要，灵活的组合使用mapState的上面的3种用法。

 ...mapState({
      countAll: function (state) {
        return state.count + this.localCount
      }
    }),
    ...mapState([
      'count'
    ])