【Vue】vuex mapState和mapGetters

1、mapState方法：用于帮助映射state中的数据为计算属性

computed: {
  	// 借助mapState生成计算属性：sum、school、subject（对象写法一）
  	...mapState({sum:'sum',school:'school',subject:'subject'}),

  	// 借助mapState生成计算属性：sum、school、subject（数组写法二）
  	...mapState(['sum','school','subject']),
},

2、mapGetters方法：用于帮助映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法一）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法二）
    ...mapGetters(['bigSum'])
},

示例：

通过计算属性可以简化模板上写的内容

防止插值语法写的过长

这边我们发现其实用计算属性直接写也比较麻烦, 红色线都是重复的内容而 vuex 的某个方法可以帮助你简化

通过分析, 可以看出只要把变化的东西交给某个函数即可

这边变化的东西为方法名和 state 里面的值名

扫描二维码关注公众号，回复： 14956145 查看本文章

这边要在 vuex 里面引入一个一个 mapState

里面写入对象, 注意写成字符串, 形式 he : 'sum'（其实 he 也是一个字符串, 但是可以省略）

然后我们先调用一个 mapState 看一下是什么

发现是一个对象

然后我们把这个直接写入计算属性发现报错

因为计算属性是一个方法, 在方法里面直接写对象显然是不正确的

用一个 es6 的解决方法

下图...obj2, // 表示把 obj2 的内容展开放入在 obj 里

并且是放在中间的, 与写的位置对应

所以同理

把函数前加入... 在最后加一个逗号就行

但注意的点是

当自己用计算属性写时, 计算属性会在开发者工具中显示出来

当我们不自己去写计算属性, 通过 mapState 去实现时，其实它也是计算属性

发现开发者工具里面把它们分类在了 vue 的绑定上, 其实我们知道这里面的东西都是隶属于 computed 上的

这是对象写法

下面为数组写法

我们先回顾一个简写

这边对象里面的 key 和要找的变量名一致时, 就可以简写为 a

但是如果时一个字符串那就不可以简写了！！！！

所以这边的对象用简写方式行不通, 因为是字符串

所以可以尝试用数组方法写

相当于在计算属性里, 写了一个方法名字为 sum, 而且读取的是 state 里面的 sum

但是要注意的是想用数组写法的话

如下写就是错误的因为 state 里面没有 he xuexiao xueke 等数据名

当对于 getters 时

就再引用一个 mapGetters

同理