[英]Vuex state not updating on mutation
在基于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
两个地方都使用对象散布运算符,但这并不能解决问题。
我没有您所有的代码,但是我认为这可能正在发生。 您正在使用已导入的初始状态来初始化游戏。 在游戏中,您可以通过执行以下操作来更新对象的状态:
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/
export default {
initializeCamera () {
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
}
}
}
}
import initial from './initial'
restartGame(state) {
state.gameRunning = true
state.camera = initial.initializeCamera()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.