Vuex - 修改状态的本地副本会导致突变错误答案

【问题标题】：Vuex - modifying local copy of state causes mutation errorVuex - 修改状态的本地副本会导致突变错误
【发布时间】：2018-06-26 04:26:30
【问题描述】：

我在我的 Vue 应用程序中遇到了一个我无法解释的问题。尝试更新状态的本地副本时出现以下错误。

错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。

这是我在代码中所做的示例

import { mapGetters } from 'vuex'
export default {
    name: 'sampleComponent',
    data() {
        return {
            userModel: null
        }
    },
    mounted() {
        this.userModel = this.user
    },
    computed: {
        ...mapGetters(['getApplicationUsers']),
        user() {
            return JSON.parse(JSON.stringify(this.getApplicationUsers[0]))
        }
    },
    methods: {
        addUserRole() {
            if (!this.userModel.userRoles.includes("newRole")) {
                this.userModel.userRoles.push("newRole")
            }
        }
        removeUserRole() {
            let index = this.userModel.userRoles.indexOf("newRole");
            if (index > -1) {
                this.userModel.userRoles.splice(index, 1)
            }
        }
}

每当调用 removeUserRole 时，我都会收到突变错误。我可以使用 addUserRole 很好地添加角色，但是当我尝试删除角色时它会对我大喊大叫。

谁能向我解释这种行为？当我对状态进行深度复制时，userModel 现在不应该与状态解耦，不被 vuex 监视，并且是可变的吗？

【问题讨论】：

这段代码看起来不错，肯定有其他代码在改变状态。你是否不小心将objectModel 的任何子对象提交到了 Vuex 状态？
objectModel 在哪里定义？不应该在data吗？另外，如果这是一个组件，data 应该是一个函数
菲尔 - 你是对的。我会更新问题。我可以随意复制这些数据并输入错误的数据。

标签： javascript vue.js vuex

【解决方案1】：

您的代码有几个问题...

在组件中，data 应该是一个函数
您需要在data 中初始化所有组件属性，否则它们将无法响应
如果要创建状态属性的本地副本，请在data 中执行此操作

考虑到这一切，试试这个

data () {
  return {
    objectModel: {...this.$store.getters.getApplicationUsers[0]}
  }
}

【讨论】：

我已经更新了我的问题代码中的错字；接得好。我尝试将初始化从挂载的钩子中拉出来，并按照您的建议将其直接放入数据中，但行为是相同的。有趣的是，尝试使用扩展运算符和 Object.assign 创建状态的可变副本会导致我的两个函数都抛出突变错误，而 JSON.parse/JSON.strigify 则使得只有删除函数会抛出突变错误跨度>

【解决方案2】：

Decade Moon 的第一条评论让我找到了答案。我使用 JSON.parse/JSON.stringify 成功创建了一个可变对象，但是在我的代码的其他地方，我将该对象提交到存储中的临时存放位置。当我后来尝试改变我的本地对象时，在 store 中有一个对它的引用，这导致了突变错误被抛出。

我的第一个操作没有导致错误的原因是我当时还没有将 userModel 提交给商店。显然，一旦 userModel 被提交到 store，它就会开始抛出错误。

【讨论】：