Vue.js 不在变异处理程序之外变异Vuex存储状态（错误）

因此，我得到以下错误消息：

[Vuex]不要在变异处理程序之外变异Vuex存储状态

根据Vuex，此错误背后的原因是以下代码试图直接改变状态

<template>
   <div v-for="item in basicInformation" :key="item.id">
     <el-col :span="12">
          <el-form-item label="First Name">
              <el-input v-model="item.firstName" />
          </el-form-item>
     </el-col>
   </div>
</template>

export default {
        computed: {
            ...mapState(['teststore']),
            basicInformation: {
                get() {
                    return this.teststore.personData.basicInformation
                },
                set(value) {
                    this.$store.commit('updateBasic', value)
                }
            }
        }
    }

为我的所有inputfields创建一个带有setter的双向计算属性似乎非常冗长。有没有一种简单的方法可以让我使用Vuex，最好是带有对象数组的v-model来创建inputfields？

您可以创建一个基本信息的副本，使其位于组件范围内

因此，将计算属性与基本信息相关联，并在v型模型中使用它将消除此警告

计算：{ 局部碱性信息{ 返回[…此基础信息]； }, },

---

只需尝试一下浅拷贝和深拷贝之间的区别。如果this.localBasicInformation很深，则spread运算符将不起作用，您将需要类似lodash的信息。

我会这样做：

代码沙盒：

导出默认值{ 计算：{ …mapState['teststore']， 碱基形成{ 返回此.teststore.personData.basicInformation }, }, 方法：{ onInput{key，value}{ 这个.$store.commit'updateBasic'，{key，value} }, 凯托拉贝尔基{ //这只是一个例子 常数keyToLabel={ 名字：“名字”， //等等。。。 } 返回键标签[键] }, }, } //在你的店里，像这样的 常数存储={ // ... 突变：{ updateBasicstate，{key，value}{ state.teststore.basicInformation[键]=值 }, }, }

---

首先，感谢您的回复！我尝试实现此功能，但收到以下错误消息：无效的属性：属性值的类型检查失败。应该是字符串，数字，我用你的代码创建了一个对象。你能告诉我这个错误是从哪里来的吗？当然，问题是基本信息是一个数组，我不明白为什么。我在这里删除了它：。请毫不犹豫地添加console.log语句，以查看发生了什么。另外，如果您确实需要数组来显示许多人的基本信息，那么您需要一个包装元素ex:a和v-for。嗨，Phil，再次感谢您的帮助。。我知道我可能在问一些明显的问题，我只是想把我的脑袋绕在这上面。。。它必须是数组的原因是，用户可以在主personData obj中处理不同的对象数组。我再次尝试使用外部div实现您的解决方案，以使其与阵列一起工作，但我再次无法使其工作。。。看见你能再帮我一次吗？

personData: {
        basicInformation: [
            {
                firstName: '',
                surname: '',
                email: '',
                phone: '',
                street: '',
                city: '',
                position: '',
                website: '',
            }
        ],
}