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

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
  random stuff
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

实际发生的事情是你的初始状态已经更新，因为你有对象的引用，而不是它的副本，所以当你试图重置状态它只是保持不变，因为你无意中改变了初始状态国家对象。

要解决此问题，只需将初始状态包装在函数（工厂函数）中，以便始终返回init状态：

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

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

这里有一个功能（位置被重置）：https://jsfiddle.net/27xozazf/

Answer 2

science s;
s.show();

Vuex状态没有更新突变

2 个答案: