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)

Answer 2

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

Эффективное использование Object.assign () может быстро затруднить чтение простых редукторов, учитывая его довольно многословный синтаксис.

Anальтернативный подход заключается в использовании синтаксиса распространения объектов, недавно добавленного в спецификацию JavaScript.Он позволяет использовать оператор распространения (...) для более краткого копирования перечислимых свойств из одного объекта в другой.

Answer 3

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

Обратите внимание, что mapState возвращает объект.Как мы используем его в сочетании с другими локальными вычисляемыми свойствами?Обычно нам нужно использовать утилиту для объединения нескольких объектов в один, чтобы мы могли передать конечный объект в вычисляемый.Однако с помощью оператора распространения объекта (который является предложением ECMAScript для этапа 4) мы можем значительно упростить синтаксис:

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

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