❤️Vuex中mapState的用法

小明的学习圈子2023-11-01前端vue mapState

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

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

下面介绍一下mapState的用法。

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

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

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

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

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

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


//第一个例子,对象展开符作用于迭代器
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'])
}

Last Updated 2024/4/6 11:55:17