Что означают три точки в данном случае: ...mapMutations({ (листинг в теле вопроса)?

Question

[Роман]

Вот:

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    todos () { return this.$store.state.todos.list }
  },
  methods: {
    addTodo (e) {
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

Это из доков nuxt.js

Непонятно, это ведь вроде не параметры а имя метода...

Спасибо.

Comments

[askhat]

Не лучшая практика очищать target.value таким же образом как у вас, это называется «побочный эффект». Сделай инпут подписчиком состояния и меняйте его.

[Роман]

Асхат Бикметов, это официальный мануал)))

[Роман]

Асхат Бикметов, и всё-таки - а зачем они его клонировали? Можно ведь было без спреда?

[askhat]

Без спреда, структура бы выглядела так

export default { // Vue instance
  methods: {
    addTodo() {},
    [resultOfIvokingMap]: {
      your() {}
      actions() {}
    }
  }
}

// А вот что сделал спред
export default { // Vue instance
  methods: {
    addTodo() {},
    your() {}
    actions() {}
  }
}

Answer 1

[askhat]

Spread Operator это синтаксический сахар для Object.create. В результате использования будет создана копия объекта–операнда, в данном случае объекта возвращённого функцией mapMutations.

Примеры:

// Только для примера, в жизни для этой задачи использовать .map
[1, 2, 3].reduce((acc, el) => [...acc, el ** 2], [])

const o = {
  importantField: “value”,
  some: true,
  random: false,
  stuff: null
}
const { importantField, ...someRandomStuff } = o

// Не совсем тоже самое, но спред используется и здесь
function variadicFn(singleArg, ...arrayWithTheRestOfArgs) {}

const condition = true
const p = { ...condition && { text: “Contion is truthful” } }

Answer 2

[dk-web]

Новый оператор ... называется spread (распростанение, расширение) или rest (остаток) в зависимости от того, где и как он используется.

es6

Comments

[Антон Спирин]

Новый оператор

Был новым. В 2015 году.

[Роман]

Спасибо кэп!

Но что он означает в данном контексте?

Answer 3

[Stalker_RED]

spread operator

Comments

[Роман]

Я знаю как он называется

[Stalker_RED]

Роман, а открыть статью и прочитать что мешает?