在一个简单的应用程序中,我创建了一组简单的更改和操作,这些更改和操作绑定(bind)到组件创建 Hook 。在浏览器中,按 F5 后,当 vue-devtools 在 Vuex 选项卡上打开时我在应用程序启动时收到错误,尽管这不应该发生。
主要问题:为什么状态为“null”以及如何更改它?
商店.js
export default new Vuex.Store({
state: {
a: undefined,
b: undefined
},
mutations: {
SET_A (state, a) {
console.info(a)
state.a = a // ← store.js?c0d6:14
},
SET_B (state, b) {
state.b = b
}
},
actions: {
setA ({ commit }, a) {
console.info(a)
commit('SET_A', a)
},
setB ({ commit }, b) {
commit('SET_B', b)
}
}
})
主页.vue
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
created: function () {
this.$store.dispatch('setA', 'A')
}
}
</script>
关于.vue
<script>
export default {
name: 'home',
components: {
},
created: function () {
this.$store.dispatch('setB', 'B')
}
}
</script>
组件选项卡上的控制台日志
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 A
store.js?c0d6:13 A
backend.js:1585 vue-devtools Detected Vue v2.6.10
Vuex 选项卡上的控制台日志
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 A
store.js?c0d6:13 A
backend.js:1585 vue-devtools Detected Vue v2.6.10
store.js?c0d6:13 null
backend.js:14674 Uncaught TypeError: Cannot set property 'a' of null
at Store.SET_A (store.js?c0d6:14)
at wrappedMutationHandler (vuex.esm.js?2ba1:725)
at backend.js:14664
at Array.forEach (<anonymous>)
at VuexBackend.replayMutations (backend.js:14664)
at VuexBackend.onInspectState (backend.js:14355)
at Bridge.emit (backend.js:5472)
at Bridge._emit (backend.js:5172)
at backend.js:5097
at Array.forEach (<anonymous>)
SET_A @ store.js?c0d6:14
wrappedMutationHandler @ vuex.esm.js?2ba1:725
(anonymous) @ backend.js:14664
replayMutations @ backend.js:14664
onInspectState @ backend.js:14355
emit @ backend.js:5472
_emit @ backend.js:5172
(anonymous) @ backend.js:5097
(anonymous) @ backend.js:5097
listener @ backend.js:2568
postMessage (async)
o @ proxy.js:1
store.js?c0d6:13 null
backend.js:14674 Uncaught TypeError: Cannot set property 'a' of null
at Store.SET_A (store.js?c0d6:14)
at wrappedMutationHandler (vuex.esm.js?2ba1:725)
at backend.js:14664
at Array.forEach (<anonymous>)
at VuexBackend.replayMutations (backend.js:14664)
at VuexBackend.onInspectState (backend.js:14355)
at Bridge.emit (backend.js:5472)
at Bridge._emit (backend.js:5172)
at backend.js:5097
at Array.forEach (<anonymous>)
SET_A @ store.js?c0d6:14
wrappedMutationHandler @ vuex.esm.js?2ba1:725
(anonymous) @ backend.js:14664
replayMutations @ backend.js:14664
onInspectState @ backend.js:14355
emit @ backend.js:5472
_emit @ backend.js:5172
(anonymous) @ backend.js:5097
(anonymous) @ backend.js:5097
listener @ backend.js:2568
postMessage (async)
o @ proxy.js:1
最佳答案
在 devtools 设置中是“New Vuex backend”。
我不知道有什么问题,但禁用此选项可以解决我的问题。
关于javascript - 页面刷新后 Vuex 状态在突变中为 null 而不是预定义对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56292088/