vuex-修改状态的本地副本导致变异错误

我在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的支持,并且是可变的?