复杂对象的 Vuex 最佳实践答案

【问题标题】：Vuex best practices for complex objects复杂对象的 Vuex 最佳实践
【发布时间】：2017-09-21 14:29:26
【问题描述】：

我的 Vuex 商店包含具有各种复杂性的对象。有些有嵌套对象，有些有嵌套对象数组。

我可以创建通用函数来改变指定的属性，如下所示：

setProperty(state,{ type, id, prop, value })
{
  state[type][id][prop] = value;
}

但是对于嵌套对象、对象数组来说，这很快就会变得复杂。必须为每个对象属性（无论是嵌套的还是其他的）创建一个突变似乎也很乏味。

创建突变以修改对象、嵌套对象、数组等的最佳实践是什么？

另一个相关问题是，将对象传递到突变中而不是在状态中查找它们是否被认为是错误的形式：

setProperty(state,{ obj, prop, value })
{
  obj[prop] = value;
}

【问题讨论】：

标签： vuex

【解决方案1】：

一般来说，最好一开始就避免嵌套状态结构。我不确定您的数据是如何构建的，但如果您这样做是因为您在这些对象或对象区域之间存在关系，那么可能值得尝试规范化状态形状。

这是来自 Redux 作者的好文章。它谈论的是 Redux，但核心概念与 Vuex 非常相似。 https://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

Vues ORM 是一个自动为您执行此操作的库。

【讨论】：