Vuex 错误：“不要在突变处理程序之外改变 vuex 存储状态。”答案

【问题标题】：Vuex error: "Do not mutate vuex store state outside mutation handlers."Vuex 错误：“不要在突变处理程序之外改变 vuex 存储状态。”
【发布时间】：2018-08-25 09:55:26
【问题描述】：

我的网站上有一个执行以下操作的按钮：

this.$store.commit('SET_THREAD_UPDATE', thread)

'thread' 是一个由多个属性和对象组成的对象，当调用函数时，'thread' 的对象或其属性之一可能只有很小的变化。

'SET_THREAD_UPDATE' 是一个 Vuex 突变，是许多导致问题的唯一一个，即使我没有做任何不同的事情。

const state = {
    threadUpdate: {}
}

const mutations = {
    SET_THREAD_UPDATE (state, userObj) {
        state.threadUpdate = userObj
    }
}

当触发提交的按钮第一次被按下时，一切都会像预期的那样工作。但是，从第二次开始，我得到了两个错误并且提交没有做任何事情：

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers." (found in <Root>)

Error: "[vuex] Do not mutate vuex store state outside mutation handlers."

我无法找出错误。这没有任何意义，因为我正在使用突变来改变状态。任何人的想法？谢谢！

【问题讨论】：

在UI组件中获取threadUpdate后，是否对其进行了赋值操作？
最有可能的是，在第一次提交时，您将 userObj 添加为商店的一部分。之后，您在商店之外更改了其内容。如果您在突变之外使用 userObj.something = someValue => 您收到警告。让 v=userObj; v.something=someValue => 你收到了警告..

标签： laravel vue.js vuejs2 vuex

【解决方案1】：

问题的解决方案是使用 JSON 而不是常规的 JS 对象。不知道为什么。

【讨论】：