Синтаксис распространения Vue js с Vuex

Как говорится в официальный документ:

Note that mapState returns an object. How do we use it in combination with other local computed properties? Normally, we'd have to use a utility to merge multiple objects into one so that we can pass the final object to computed. However with the object spread operator (which is a stage-4 ECMAScript proposal), we can greatly simplify the syntax:

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

этот синтаксис используется для упрощения и предоставления кода чистый, а также он необходим, когда вы используете свойства локали computed

да.

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)

да. Это обсуждение актуально.

While effective, using Object.assign() can quickly make simple reducers difficult to read given its rather verbose syntax.

An alternative approach is to use the object spread syntax recently added to the JavaScript specification. It lets you use the spread (...) operator to copy enumerable properties from one object to another in a more succinct way.