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,
  });
}

如何处理嵌套数组更新？这是我在codeandbox https://codesandbox.io/s/w6nq81l808

上的简单演示

当我在红色区域添加两个放射线组（两次单击“放射线组”）并同时编辑两个放射线组时，该值将同时更改。

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
}

如何在vuex存储中设置嵌套状态？

1 个答案: