What do the three dots mean in this case: ...mapMutations({ (listing in the body of the question)?

Question

Vue.js

Here:

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

This is from the nuxt.js docs.
It's not clear, these are not parameters, but the name of the method ...
Thank you.

Answer 1

Spread Operator is syntactic sugar for Object.create. As a result of use, a copy of the operand object will be created, in this case the object returned by the mapMutations function.
Examples:

// Только для примера, в жизни для этой задачи использовать .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

The new operator ... is called spread (spread, expansion) or rest (remainder) depending on where and how it is used.
es6

Answer 3

spread operator