Vue js 使用 Vuex 传播语法答案

【问题标题】：Vue js spread syntax with VuexVue js 使用 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
  }
}

【问题讨论】：

标签： javascript vue.js ecmascript-6 vuejs2 vuex

【解决方案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 规范。它可以让您使用价差 (...) 运算符将可枚举属性从一个对象复制到另一个更简洁的方式。

【讨论】：