郑州做营销型网站建设全国疫情最新消息

要点：

 

 

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

防止插值语法写的过长

 

 

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

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

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

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

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

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

发现是一个对象

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

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

用一个es6的解决方法

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

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

 

所以同理

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

 

 但注意的点是

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

 

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

 

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

 

 这是对象写法

 下面为数组写法

我们先回顾一个简写 

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

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

 

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

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

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

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

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

 

 当对于getters时

就再引用一个mapGetters

 同理