javascript - Is... in the following code a spread operator or an operation operator? What does it mean to write like this?

Question

Code in vuex

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},

What does the... in front of mapState mean? What is the difference between adding this and not adding this? I have seen the relevant documentation of the spread operator and the operation operator, but I still don’t quite understand it. I would like a more detailed explanation. .

Answer 1

Write a few examples yourself and you’ll know...for example:

const state = {
    a: 1,
    b: 2,
    c: 3
};
const now = {
    ...state,
    d: 4,
    e: 5
};

console.log(now);

Most browsers do not support this syntax, so you can go to Babel to convert it first, put the transcoded code directly into the console and run it, and see what comes out. This operator is actually quite simple...

Answer 2

... Expand the object into key-value pairs here. If you write it directly, there will be grammatical errors or logical errors.

Borrowing @xiaoboost’s example:

There is... operator, click to view

const state = {
    a: 1,
    b: 2,
    c: 3
};
const now = {
    ...state,
    d: 4,
    e: 5
};

console.log(now);

The result is

Object {
  "a": 1,
  "b": 2,
  "c": 3,
  "d": 4,
  "e": 5
}

There is no ... operator, click to view

The result is:

Object {
  "d": 4,
  "e": 5,
  "state": Object {
    "a": 1,
    "b": 2,
    "c": 3
  }
}

Answer 3

...mapState(["count"])
Adding... is to divide the mapState object and return the separated items, which can be mixed with local calculated attributes (computed)
Without adding... mapState is an object computed is also an object, so you have to assign attributes one by one. Or if you don’t plan to have other attributes in the computed object, you can directly
computed:mapState(["count"]) which should also work