{... obj1，obj2}到底是做什么的 [英] What does { ...obj1, obj2 } do exactly

问题描述

假设我们有两个对象:

const state = {
  fishes: { /* some obj data */ },
  animals: { /* some obj data  */ }

const animals = { /* some NEW data */ }

在Vuex中，有一个方法replaceState()，根据文档一个参数，然后用该对象替换状态.

In Vuex there is a method replaceState(), which according to the documentation takes one argument and replaces the state with that object.

以下内容将导致什么:

replaceState({ ...state, animals })

更具体地说，{ ...state, animals }到底能做什么?

More specifically, what does { ...state, animals } do exactly?

为了提供一些背景信息，我从

To bring some context, I took this example from the answer of this question. In that question, the user wanted to replace the animals property of the state with the new object animals.

我不确定这是否与Vuex/Vue.js相关，或者这是一个纯粹的JS问题，但无论如何我还是会用vue.js对其进行标记.

I'm not sure if this is relevant to Vuex / Vue.js, or is it a pure JS question, but I'll tag it with vue.js anyway.

推荐答案

这实际上来自ECMAScript 2018的

This is actually from ECMAScript 2018's spread syntax and ECMAScript 2015's object destructuring.

{ ...state, animals }创建state对象的浅表副本，并带有一个名为animals的新属性(其中包含动物对象的值).

{ ...state, animals } creates a shallow copy of the state object, with a new property called animals (with the value of animals object within it).

由于您是Vuex用户，因此符合不变的更新模式，这是为了防止更改原始"状态对象.您应该阅读使用不变模式处理常见操作(例如添加/更新/删除)的方式.

Since you are a Vuex user, this conforms to the rule of immutable update patterns, which is to prevent the 'original' state object from being altered or mutated. You should read up on the ways of handling common operations such as add/update/delete, using the immutable pattern.

这篇关于{... obj1，obj2}到底是做什么的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！