Javascript Vue JS表单问题-在处理程序外部更改vuex存储状态

我当前收到的

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

错误仅在我尝试编辑表单时出现，如果我发布了新插件，它可以正常工作。从doc我不确定哪里出了问题——当我从vuex获取插件时，我尝试将这些值赋给本地状态，然后让vuex单独使用。理想情况下，一旦获取vuex，在提交表单之前，我不需要再次触摸它。但我不确定到底是什么导致了这个错误

<template>
    <div>
        <h4>{{this.$route.query.mode==="new"?"New":"Edit"}} Plugin</h4>
        <form class="">
            <label>Id</label>
            <input :value="plugin.id" class="" type="text" @input="updateId">
            <label>Name</label>
            <input :value="plugin.name" class="" type="text" @input="updateName">
            <label>Description</label>
            <textarea :value="plugin.description" class="" type="text" @input="updateDescription"></textarea>
            <label>Version</label>
            <input :value="plugin.version" class="" type="text" @input="updateVersion">
            <button type="submit" @click.prevent="submitForm">Submit</button>
        </form>
    </div>
</template>

<script>
import util from '~/assets/js/util'
export default {
    created() {
        if (this.mode === 'edit') {
            this.plugin = this.$store.state.currentLicence.associatedPlugins.find(p => p.pluginId === this.$route.query.pluginId)
        }
    },
    methods: {
        updateId(v) {
            this.plugin.id = v.target.value
        },
        updateName(v) {
            this.plugin.name = v.target.value
        },
        updateDescription(v) {
            this.plugin.description = v.target.value
        },
        updateVersion(v) {
            this.plugin.version = v.target.value
        }
    },
    computed: {
        mode() { return this.$route.query.mode }
    },
    data: () => ({
        plugin: {
            id: null,
            name: null,
            description: null,
            version: null
        }
    })
}
</script>

{{this.$route.query.mode==“new”？“new”：“Edit”}插件
身份证件
名称
描述
版本
提交
从“~/assets/js/util”导入util
导出默认值{
创建（）{
如果（this.mode==='edit'）{
this.plugin=this.$store.state.CurrentLicense.associatedPlugins.find（p=>p.pluginId==this.$route.query.pluginId）
}
},
方法：{
更新ID（v）{
this.plugin.id=v.target.value
},
更新名称（v）{
this.plugin.name=v.target.value
},
更新说明（v）{
this.plugin.description=v.target.value
},
更新版本（v）{
this.plugin.version=v.target.value
}
},
计算：{
mode（）{返回此。$route.query.mode}
},
数据：（）=>({
插件：{
id:null，
名称：空，
description:null，
版本：空
}
})
}

---

感谢您的帮助，很明显，我对vuex和本地状态处理方式的理解是有缺陷的

您会收到此错误，因为您正在直接编辑状态

this.plugin=this.$store.state.currentLicense.associatedPlugins.find（p=>p.pluginId==this.$route.query.pluginId）

-这正是代码的这一部分，您可以将对象从存储直接放入数据中，因此通过编辑字段，您可以直接编辑状态。不要那样做

您应该始终使用以下内容（我不确定嵌套计算将如何工作，但我认为您不必嵌套它）：

---

有一个很好的包，它将为您完成大部分工作：。您可以使用它为每个字段半自动生成带有getter和setter的computed。

由于您直接编辑状态，因此会出现此错误

this.plugin=this.$store.state.currentLicense.associatedPlugins.find（p=>p.pluginId==this.$route.query.pluginId）

-这正是代码的这一部分，您可以将对象从存储直接放入数据中，因此通过编辑字段，您可以直接编辑状态。不要那样做

您应该始终使用以下内容（我不确定嵌套计算将如何工作，但我认为您不必嵌套它）：

---

有一个很好的包，它将为您完成大部分工作：。您可以使用它为每个字段半自动地生成带有getter和setter的computed。

感谢您的回答，我没有意识到由于创建了实例，我正在直接修改存储。我发现，如果我将该行更改为

this.plugin=JSON.parse（JSON.stringify（this.$store.state.currentLicense.associatedPlugins.find（p=>p.pluginId==this.$route.query.pluginId））

我可以在所有表单输入中使用v-model，而不需要get和set方法的额外代码。它工作正常，但不确定这种方法是否有任何负面影响？唯一的负面影响是Vuex中没有当前的编辑状态，但有时它可能是有益的，因此这取决于您的用例。啊，好吧，项目的性质意味着我无论如何都需要定期从后端获取，所以在这种情况下，这应该不是问题。谢谢你的帮助，我很高兴我帮了你：）谢谢你的回答，我没有意识到我是因为创建了实例而直接改变了商店。我发现，如果我将该行更改为

this.plugin=JSON.parse（JSON.stringify（this.$store.state.currentLicense.associatedPlugins.find（p=>p.pluginId==this.$route.query.pluginId））

我可以在所有表单输入中使用v-model，而不需要get和set方法的额外代码。它工作正常，但不确定这种方法是否有任何负面影响？唯一的负面影响是Vuex中没有当前的编辑状态，但有时它可能是有益的，因此这取决于您的用例。啊，好吧，项目的性质意味着我无论如何都需要定期从后端获取，所以在这种情况下，这应该不是问题。谢谢你的帮助，很高兴我帮了你：）

computed: {
  plugin: {
    id: {
      get () { // get it from store }
      set (value) { // dispatch the mutation with the new data } 
    }
  }
}