[JavaScript知识库]Vuex中mapState的用法

今天遇到一个吭，最后使用vue mapState得以解决。

之前有说过使用mapState语法糖，在这里直接用computed返回竟然不行。然后在官网有看到相关说明：进入官网。

下面介绍一下mapState的用法。

 computed: {
    ...mapState(['city'])
  }

首先，传统的写法，computed接受的形式为

computed: {
  city: function () {
    return '北京'
  }
}
 
//应用ES6新标准，也可以改写为
computed: {
 city () {
 return '北京'
 }
}

那么mapState的作用相当于，生成了

{
 city: funtion() {return '上海'}
}

…是对象展开运算符，下面的例子可以使你更好的理解他的作用

2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//第一个例子，对象展开符作用于迭代器
function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));   // expected output: 6
 
//第二个例子，对象展开符作用于对象
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
 
 
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2;
x.a.b // 2
 
a = {a:1}
c = {b:2, ...a}a:1
c //{b:2, a:1}

继续讲mapState，本身，官方的写法是

computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,
    
    //上面实际上等同于，（参考箭头函数的作用） 
    count: (state) => {return state.count}
 
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',
 
    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
})

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组，如下

computed:mapState(['city'])	

因为…（对象展开运算符）的原因，可以将mapState写在computed对象内部，(这样可以方便添加其他属性)如下

computed: {
  add () {return 'add...'},
  ...mapState(['city'])
}