Vue js 使用 Vuex 传播语法

Posted 2023-02-22

【中文标题】Vue js 使用 Vuex 传播语法

【英文标题】：Vue js spread syntax with Vuex

【发布时间】：2019-05-23 14:52:51

【问题描述】：

使用vuex mapState 时，文档说您可以使用 传播语法如下，我按预期工作。

我只是好奇这实际上在做什么，所以我对使用扩展语法有了更好的理解。

这会不会……

computed: 
  ...mapState([
    'message',
    'storeArray'
  ])

有效地做到这一点...？

computed: 
  message()
    return this.$store.state.message
  
  storeArray()
    return this.$store.state.storeArray
  

【参考方案1】：

是的。

mapState 所做的是返回一个带有函数的对象，所以它实际上是在返回

 
  message()
    return this.$store.state.message
  
  storeArray()
    return this.$store.state.storeArray
  

实际上

 
  message: function()
    return this.$store.state.message
  
  storeArray: function()
    return this.$store.state.storeArray
  

这是一回事。

扩展运算符所做的是提取对象键并将它们放入父对象中，用相同的名称替换任何已经存在的键。

所以和做的基本一样：

computed: 
  message: mapState(['message','storeArray'])['message'],
  storeArray: mapState(['message','storeArray'])['storeArray']

您可以将扩展运算符视为使用Object.assign 的一种更简单的方式。

computed: ...mapState(...), ...myOtherComputedObject)
computed: Object.assign(, mapState(...), myOtherComputedObject)

【参考方案2】：

就像他们在official doc 中所说的那样：

请注意，mapState 返回一个对象。我们如何将它与其他本地计算属性结合使用？通常，我们必须使用实用程序将多个对象合并为一个，以便我们可以将最终对象传递给计算对象。但是使用object spread operator（这是一个第 4 阶段的 ECMAScript 提案），我们可以大大简化语法：

 computed: 
    localComputed ()  /* ... */ ,
    // mix this into the outer object with the object spread operator
    ...mapState(
      // ...
    )
  

此语法用于简化和提供 干净 代码，并且在您使用语言环境 computed 属性时也是必需的

【讨论】：

这有帮助。从文档中并不清楚这 3 个点是否代表实际的运算符。

【参考方案3】：

是的。 This discussion 是相关的。

虽然有效，但使用 Object.assign() 可以快速简化 鉴于其相当冗长的语法，reducers 难以阅读。

另一种方法是最近使用对象传播语法 添加到 javascript 规范。它可以让您使用价差 (...) 运算符将可枚举属性从一个对象复制到 另一个更简洁的方式。