如何修改从Vuex getter获取键结构的v-model绑定输入值

代码无法正常运行是两个错误导致的：

• beforeCreate 生命周期执行时，组件data还未完成初始化，此时给this.inputValue赋值不会被响应式系统劫持，后续输入操作完全无法触发视图更新。
• 直接将Vuex getter返回的对象赋值给本地变量，本质是持有了store内部状态的引用，直接修改会违反Vuex单向数据流规则，开启严格模式时会直接抛出错误，就算关闭严格模式也会导致状态变更无法追踪。

核心思路是把store里的初始值做深拷贝，存到组件本地的响应式数据中，输入操作只修改本地数据，需要同步回store时再通过mutation提交。

1. 将赋值逻辑移到created生命周期，对getter返回的初始值做深拷贝，切断和store状态的引用关联。
2. 补全空值判断，避免层级访问时因为值为undefined抛出报错。
3. 给v-for绑定唯一id作为key，避免DOM复用导致输入值错位。

修正后的逻辑代码：

computed: {
  list() {
    return this.$store.getters.list;
  }
},
data() {
  return {
    inputValue: {}
  }
},
created() {
  // 深拷贝初始值，避免直接操作store状态
  const initValue = this.$store.getters.inputValue;
  // 无特殊类型时用JSON拷贝即可，存在Date/函数等特殊值时换用structuredClone(initValue)
  this.inputValue = JSON.parse(JSON.stringify(initValue));
},
methods: {
  showPartNames(groupId, lineId, productName) {
    if (!productName?.trim()) return [];
    const targetGroup = this.list.find(group => group.id == groupId);
    if (!targetGroup?.children) return [];
    const targetLine = targetGroup.children.find(line => line.id == lineId);
    if (!targetLine?.children) return [];
    const targetProduct = targetLine.children.find(p => 
      p.name.toLowerCase() === productName.trim().toLowerCase()
    );
    return targetProduct?.children || [];
  },
  // 需要持久化输入值时调用该方法，通过mutation同步到store
  saveInputToStore() {
    this.$store.commit('setInputValue', JSON.parse(JSON.stringify(this.inputValue)));
  }
}

模板部分调整：

<div v-for="group in list" :key="group.id">
  <div v-for="line in group.children" :key="line.id">
    <el-input
      v-if="inputValue[group.id]?.hasOwnProperty(line.id)"
      v-model="inputValue[group.id][line.id]"
    />
    <template v-for="part in showPartNames(group.id, line.id, inputValue[group.id]?.[line.id])" :key="part.id">
      <div>
        <a :href="`/partnumbers/${group.id}/${line.id}/${part.id}`">{{ part.name }}</a>
      </div>
    </template>
  </div>
</div>

• 不要在业务代码里直接修改Vuex getter返回的状态，所有store状态变更必须走mutation/action流程。
• 深拷贝方案根据实际数据结构选：纯JSON兼容的字符串、数字、普通对象用JSON.parse(JSON.stringify())性能最好，存在特殊类型用浏览器原生structuredClone即可，不需要额外引入第三方工具库。
• v-for不要用遍历索引作为key，尤其是存在输入框这类表单控件时，很容易出现DOM复用导致的值错位、输入错乱问题，直接用数据自带的唯一id作为key最稳妥。

内容的提问来源于stack exchange，提问作者Dev