如何在 vuex 商店中设置嵌套状态？

Question

我的应用程序中有一个非常复杂的状态，例如：

state: {
  formFieldList: [
    {
      name: 'RadioGroup',
      schema: {
       edit:true,
       label:"Radios",
       name:"Radios",
       type:"radios",
       values: [
         {
           labelName: 'default',
           value: 'default',
         }
         {
           labelName: 'default2',
           value: 'default',
         }
       ]
     },
     {
      name: 'RadioGroup1',
      schema: {
       edit:true,
       label:"Radios1",
       name:"Radios1",
       type:"radios1",
       values: [
         {
           labelName: 'default',
           value: 'default',
         }
         {
           labelName: 'default2',
           value: 'default',
         }
       ]
     },
   },
 ],
}

作为 Vuejs 数组更改警告，我在我的突变中使用 Vue.set。当我在一个 fieldList 项中设置 values 数组时，它将更新所有 RadioGroup 价值观。

updateOptionValue(state, { index, optionIndex, value }) {
  let values = state.formFieldList[index].schema.values;
  let labelName = values[optionIndex].labelName;
  Vue.set(values, optionIndex, {
    labelName,
    value,
  });
}

如何处理嵌套数组更新？ 这是我在代码沙盒上的简单演示 https://codesandbox.io/s/w6nq81l808

当我将两个radiogroups添加到红色区域（单击radiogroup两次），并同时编辑两个radiosgroups时，值会同时改变。

Answer 1

您可以将状态属性分配给新对象以使其具有反应性：

updateOptionValue(state, { index, optionIndex, value }) {
  let values = state.formFieldList[index].schema.values;
  let labelName = values[optionIndex].labelName;
  values[optionIndex] = {
    value,
    labelName
  }
  state.formFieldList = JSON.parse(JSON.stringify(state.formFieldList)) // assign new object
}