大家好，又见面了，我是你们的朋友全栈君。
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
mapState是什么?
表面意思:mapState是state的辅助函数.这么说可能很难理解
抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的”更好的操作”,用了一段时间后,真香!
实际作用:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
在使用mapState之前,要导入这个辅助函数.
import { mapState } from ‘vuex’ 然后就是使用方式了
<template> <div id=”example”> <button @click=”decrement”>-</button> { {count}} { {dataCount}} <button @click=”increment”> </button> <div>{ {sex}}</div> <div>{ {from}}</div> <div>{ {myCmpted}}</div> </div> </template> <script> import { mapState } from ‘vuex’ export default { data () { return { str: ‘国籍’, dataCount: this.$store.state.count } }, computed: mapState({ count: ‘count’, // 第一种写法 sex: (state) => state.sex, // 第二种写法 from: function (state) { // 用普通函数this指向vue实例,要注意 return this.str ‘:’ state.from }, // 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数 // from: (state) => this.str ‘:’ state.from myCmpted: function () { // 这里不需要state,测试一下computed的原有用法 return ‘测试’ this.str } }), methods: { increment () { this.$store.commit(‘increment’) }, decrement () { this.$store.commit(‘decrement’) } }, created () { // 写个定时器，发现computed依旧保持了只要内部有相关属性发生改变不管是当前实例data中的改变，还是vuex中的值改变都会触发dom和值更新 setTimeout(() => { this.str = ‘国家’ }, 1000) } } </script> 在使用的时候,computed接收mapState函数的返回值,你可以用三种方式去接收store中的值,具体可以看注释.
事实上第二种和第三种是同一种,只是前者用了ES6的偷懒语法,箭头函数,在偷懒的时候要注意一个问题,this指针的指向问题,我已经在很多篇文章中提到不要在vue中为了偷懒使用箭头函数,会导致很多很难察觉的错误,如果你在用到state的同时还需要借助当前vue实例的this,请务必使用常规写法.
当然computed不会因为引入mapState辅助函数而失去原有的功能—用于扩展当前vue的data,只是写法会有一些奇怪,如果你已经写了一大堆的computed计算属性,做了一半发现你要引入vuex,还想使用mapState辅助函数的方便,你可以需要做下列事情.
//之前的computed computed:{ fn1(){ return …}, fn2(){ return …}, fn3(){ return …} …….. } //引入mapState辅助函数之后 computed:mapState({ //先复制粘贴 fn1(){ return …}, fn2(){ return …}, fn3(){ return …} …… //再维护vuex count:’count’ ……. }) 从上述写法可以看出来,这不符合代码的某些说不明道不清的特性,我们希望我们可以不用去做一些复制粘贴的无用操作,而是直接使用mapState,希望它能自动融入到当前生产环境中,ok,ES6 (或者说ES7)提供了这个方便.
3 …mapState 事实上…mapState并不是mapState的扩展,而是…对象展开符的扩展.当然如果你把他用在这里会发现他能使得代码看起来变得,更加符合常规逻辑了,为什么这么说,你等下就会知道了.
首先,来回顾一下…对象展开符在数组中的表现,这在ES6语法学习分类里有相关说明,如果有兴趣可以关注我的ES6分类中的文章.
let arr = [1,2,3] console.log(…arr) //1,2,3 然后来看一个例子.
let MapState = mapState({ count: ‘count’, sex: (state) => state.sex }) let json = { ‘a’: ‘我是json自带的’, …MapState } console.log(json) 这里的json可以成功将mapState return的json格式,和json自带的a属性成功融合成一个新的对象.你可以将这个称为对象混合
这样,你就可以自由的使用mapState了.
//之前的computed computed:{ fn1(){ return …}, fn2(){ return …}, fn3(){ return …} …….. } //引入mapState辅助函数之后 computed:{ //原来的继续保留 fn1(){ return …}, fn2(){ return …}, fn3(){ return …} …… //再维护vuex …mapState({ //这里的…不是省略号了,是对象扩展符 count:’count’ }) }
