2

假设我们有两个对象：

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

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

在 Vuex 中有一个方法 replaceState()，根据文档，它接受一个参数并用该对象替换状态。

以下结果会是什么：

replaceState({ ...state, animals })

更具体地说，究竟是{ ...state, animals }做什么的？

为了带来一些背景，我从这个问题的答案中举了这个例子。在那个问题中，用户想animals用新的 object 替换 state 的属性animals。

我不确定这是否与 Vuex / Vue.js 相关，还是纯粹的 JS 问题，但无论如何我都会用 vue.js 标记它。

4

3 回答 3

4

这实际上来自 ECMAScript 2018 的扩展语法和 ECMAScript 2015 的对象解构。

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

由于您是 Vuex 用户，这符合不可变更新模式的规则，即防止“原始”状态对象被更改或变异。您应该阅读使用不可变模式处理常见操作（例如添加/更新/删除）的方法。

于 2019-04-15T08:35:21.210 回答
2

这意味着Object.assign({}, state, { animals: animals} }。

于 2019-04-15T08:35:32.953 回答
2

所做的是将的所有属性传播state到新对象中 - 制作浅拷贝。原始对象 ( state) 中的所有属性都将被复制到新对象（您要传入的对象replaceState）中。这是一个简单的演示：

let obj1 = { obj: "1" };
let obj2 = { ...obj1, obj2: true };
console.log(obj1);
console.log(obj2);

该animals位是ES6 属性简写，本质上会这样做：

animals: animals

这只是更简洁的语法。

于 2019-04-15T08:35:47.833 回答