Vue JS使用Vuex传播语法

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)