Question

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

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

这会...

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

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

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

Answer 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)

Answer 2

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

请注意，mapState返回一个对象。我们如何将其与其他本地计算属性结合使用？通常，我们必须使用实用程序将多个对象合并为一个，以便我们可以将最终对象传递给计算对象。但是，使用object spread operator（这是ECMAScript的第4阶段建议），我们可以大大简化语法：
 computed: {
    localComputed () { /* ... */ },
    // mix this into the outer object with the object spread operator
    ...mapState({
      // ...
    })
  }

此语法用于简化和提供干净代码，当您使用语言环境computed属性

时也是必需的

Answer 3

是的。 This discussion是相关的。

虽然有效，但是使用Object.assign（）可以使操作变得简单   简化器由于其冗长的语法而难以阅读。

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

Vue JS使用Vuex传播语法

3 个答案: