状态在我身上发生变化

Question

我有一个非常奇怪的问题，状态变化在突变(！)。在我的突变中，我在前两行记录了以下内容：

console.log('mutation state:', state)
console.log('mutation state.game.gameTree[2]:', state.game.gameTree[2]) 

期望值：表示state.game.gameTree是相同的

实战：，他们不是！正如你在截图上看到的那样，state.game.gameTree[2].activeActionId是不一样的。

​

​

如何将这个值从第1行更改为第2行？我希望有人能帮忙:)

Answer 1

Chrome在控制台中查看对象时显示对象的值，而不是在记录对象时显示它的值。我会尝试这样做：

console.log('mutation state:', JSON.parse(JSON.stringify(state)))
console.log('mutation state.game.gameTree[2]:', JSON.parse(JSON.stringify(state.game.gameTree[2])))

如果你仍然有同样的问题，那么有些奇怪的事情发生了。

例如，如果您有：

​

function example() {
    var a = { b: { c: 1 }};
    return function() {
        a.b.c++;
        return a;
    }
}

var wtf = example()

console.log(wtf())
console.log(wtf())
console.log(wtf())

​

您将在这里看到它按预期递增。如果您在chrome中运行它，您将看到：

{b: {…}}
{b: {…}}
{b: {…}}

当你展开它时，它们都会显示相同的值。

Answer 2

正如dave已经提到的，如果您将鼠标悬停在扩展对象的右侧的i上，您将看到“它现在已经被计算了”。换句话说，它将检查展开值时的值，而不是记录值时的值。

如果需要调试正在快速更改的内容，请使用debugger语句。这将暂停执行，并在源中显示调试器语句。您可以在变量上悬停以查看其内容，也可以在右侧的某个范围内找到一个变量。您可以逐步遍历代码，查看变量的变化情况。如果您记录了某些内容，因为执行已经停止，如果您这样做了，则在记录对象时将实际对其进行评估：

console.log(x);
debugger;

Answer 3

我找到了原因。谢谢你们的建议。他们帮助我朝着正确的方向前进。

实际上，我在一个域函数中对游戏对象进行了变异，该函数期望有一个简单的数据对象。我一直认为我的域函数是不可变的，因为它们都使用spread操作符返回新的数据对象。来自一个基于不可变的反应性流的功能框架，这从来就不是一个问题。

然而，对于Vue，我意识到这可能是个问题，因为Game不再是一个普通的数据对象。我将研究如何以最佳方式处理这一问题。

目前，使用JSON.parse(JSON.stringify(State))是可行的。它将游戏转换为一个普通的数据对象，一切都按预期工作。