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