Question

我在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监视并且可变吗？

Answer 1

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

在组件中，data应该是一个函数
您需要在data中初始化所有组件属性，否则它们将不会起作用
如果要创建状态属性的本地副本，请在data

请记住所有这些，

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

Answer 2

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

我的第一个动作没有引起错误的原因是因为我当时还没有将userModel提交给商店。显然，将userModel提交到商店后，便开始引发错误。

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

2 个答案: