Vuex状态在突变时未更新

Question

在基于Vue.js / Vuex的应用程序中，我正在使用此突变方式重置部分Vuex状态：

restartGame(state) {
    state.gameRunning = true

    state.camera = {
        position: {
            x: 0,
            y: 10,
            z: 0
        },
        moveForward: false,
        moveBackward: false,
        moveLeft: false,
        moveRight: false,
        velocity: {
            x: 0,
            z: 0
        },
        mouseMovement: {
            x: 0,
            y: 0
        },
        rotation: {
            x: 0,
            y: 0
        }
    }
}

这样，一切正常，但是写出整个相机状态对我来说似乎很冗长。因此，我将摄像机的初始状态提取到了单独的文件中：

initialCameraState.js

export default {
    position: {
        x: 0,
        y: 10,
        z: 0
    },
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    velocity: {
        x: 0,
        z: 0
    },
    mouseMovement: {
        x: 0,
        y: 0
    },
    rotation: {
        x: 0,
        y: 0
    }
}

我已经resetGame()像这样重构了突变：

import initialCameraState from './initialCameraState'

restartGame(state) {
    state.gameRunning = true

    state.camera = initialCameraState
}

但是某种程度上这是行不通的，Vuex商店没有得到更新，但似乎保持不变。怎么会这样？

我还initialCameraState.js用于设置（部分）Vuex存储的初始状态。我首先想到的是，当改变状态的相应部分时，initialCameraState也会被改变。那将解释为resetGame()不显示任何影响。因此，我尝试在initialCameraState.js导入/使用的两个地方都使用对象散布运算符，但这并不能解决问题。

Answer 1

我没有您所有的代码，但是我认为这可能正在发生。您正在使用已导入的初始状态来初始化游戏。在游戏中，您可以通过执行以下操作来更新对象的状态：

   state.camera['position'] = {
      x: 100,
      y: 100,
      z: 100
    }
  }

实际发生的情况是您的初始状态已更新，因为您有对对象的引用，而不是对象的副本，因此，当您尝试重置状态时，它保持不变，因为您无意中更改了初始状态对象。

为了解决这个问题，只需将初始状态包装在一个函数（工厂函数）中，以便始终返回初始状态：

export default function() {
  return {    
    position: {
      x: 0,
      y: 10,
      z: 0
    },
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    velocity: {
      x: 0,
      z: 0
    },
    mouseMovement: {
      x: 0,
      y: 0
    },
    rotation: {
      x: 0,
      y: 0
    }
  }
};

这是一个JSFiddle，它显示了没有函数会发生什么（位置保持不变）：https ://jsfiddle.net/9qg8ws0x/

这是一个带有功能的位置（位置已重置）：https : //jsfiddle.net/27xozazf/