Arrays 多维阵列，Vuex&；突变

我正在尝试添加和删除存储在Vuex中的多维数组中的项

数组是一组类别，每个类别都有一个子类别（无限，而不仅仅是二维数组）

示例数据集如下所示：

[
   {
     id: 123,
     name: 'technology',
     parent_id: null,
     children: [
          id: 456,
          name: 'languages',
          parent_id: 123,
          children: [
             {
                id:789,
                name: 'javascript',
                parent_id: 456
             }, {
                id:987,
                name: 'php',
                parent_id: 456
             }
          ]
        }, {
          id: 333,
          name: 'frameworks', 
          parent_id 123,
          children: [
             {
                id:777,
                name: 'quasar',
                parent_id: 333
             }
          ]
        }
     ]
   }
]

..我的问题是，如何最好地将元素添加和删除到此数组（位于Vuex存储区内）

我通常使用Vue.Set（）操作Vuex存储区内的简单数组以获得响应性。然而，因为我不确定被操纵的嵌套数组有多深，所以我无法理解它

下面是一个我认为可以使用递归添加子类别元素的示例：

export const append = (state, item) => {
  if (item.parent_uid !== null) {
    var categories = []
    state.data.filter(function f (o) {
      if (o.uid === item.parent_uid) {
        console.log('found it')
        o.push(item)
        return o
      }
      if (o.children) {
        return (o.children = o.children.filter(f)).length
      }
    })
  } else {
    state.data.push(item)
  }
}

---

首先要了解的是，

vuex

或基于

flux

体系结构的任何其他状态管理库都不是为处理嵌套对象图而设计的，更不用说您提到的任意/无限嵌套对象了。更糟糕的是，即使使用浅状态对象，

vuex

在您需要时也能发挥最佳效果

嗯，你可以采取两种可能的方法

1.规范化数据 这是vue.js团队成员推荐的方法

如果您确实希望在规范化后保留有关层次结构的信息，则可以与转换函数结合使用，通过

name

将嵌套对象展平为如下所示：

const store=新的Vuex.store({
...
声明：{
数据：{
'technology'：{id:123，name:'technology'，parent_id:null}，
'technology.languages'：{id:456，name:'languages'，parent_id:123}，
'technology.languages.javascript'：{id:789，name:'javascript'，parent_id:456}，
'technology.languages.php'：{id:987，name:'php'，parent_id:456}，
'technology.frameworks'：{id:333，name:'frameworks'，parent_id:123}，
'technology.frameworks.quasar'：{id:777，name:'quasar'，父_id:333}，
}
},
});

然后，您可以像往常一样对处于

state.data

状态的每个项目使用

Vue.set（）

2.在修改时创建一个全新的状态对象 这是

vuex

文档中提到的第二种方法：

向对象添加新特性时，应：

• 使用

  Vue.set（对象'newProp'，123）

  ，或

• 将该对象替换为新对象

您可以使用另一个库轻松实现这一点：。例如，假设您想在

语言

下添加新类别，您可以创建一个如下的变体：

const store=新的Vuex.store({
突变：{
addCategory（状态，{name，id，parent_id}）{
state.data=immutable.push（state.data，'0.children.0.children'，{id，name，parent_id}）；
},
},
...
});

---

每次修改时，通过将

state.data

重新分配给新对象，

vuex

反应性系统将正确通知您对

state.data

所做的更改。如果您不想对数据进行规范化/非规范化，这种方法是可取的。

非常感谢您的回答，这正是我所需要的。@muffinlab很高兴它有帮助。：）