这个问题在这里已有答案:
假设我们有两个对象:
const state = {
fishes: { /* some obj data */ },
animals: { /* some obj data */ }
const animals = { /* some NEW data */ }
在Vuex中有一个方法replaceState(),它根据documentation获取一个参数并用该对象替换状态。
以下结果如何:
replaceState({ ...state, animals })
更具体地说,{ ...state, animals }
究竟做了什么?
为了得到一些背景,我从this问题的答案中得到了这个例子。在那个问题中,用户想要用新对象animals
替换状态的animals
属性。
我不确定这是否与Vuex / Vue.js相关,或者它是一个纯粹的JS问题,但无论如何我都会用vue.js标记它。
这实际上来自ECMAScript 2018的spread syntax和ECMAScript 2015的object destructuring。
{ ...state, animals }
创建了state
对象的浅层副本,其中包含一个名为animals
的新属性(其中包含动物对象的值)。
由于您是Vuex用户,因此符合immutable update patterns规则,即防止“原始”状态对象被更改或变异。您应该阅读使用不可变模式处理常见操作(如添加/更新/删除)的方法。
这意味着Object.assign({}, state, { animals: animals} }
。
它的作用是将state
的所有属性传播到新对象中 - 制作浅层副本。原始对象(state
)中的所有属性都将被复制到新对象(您传递给replaceState
的对象)中。这是一个简单的演示:
let obj1 = { obj: "1" };
let obj2 = { ...obj1, obj2: true };
console.log(obj1);
console.log(obj2);
animals
位是ES6 property shorthand,基本上会这样做:
animals: animals
这只是更清晰的语法。