When developing a basic application, I set up a series of mutations and actions linked to the component creation hook. However, upon refreshing the browser using F5 and accessing vue-devtools on the Vuex tab, an unexpected error occurs at the beginning of the application startup.
The main issue at hand is why the state is showing as 'null' and how this can be rectified.
store.js
export default new Vuex.Store({
state: {
x: null,
y: null
},
mutations: {
SET_X (state, x) {
console.info(x)
state.x = x
},
SET_Y (state, y) {
state.y = y
}
},
actions: {
setX ({ commit }, x) {
console.info(x)
commit('SET_X', x)
},
setY ({ commit }, y) {
commit('SET_Y', y)
}
}
})
Home.vue
<script>
// @ refers to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
},
created: function () {
this.$store.dispatch('setX', 'X')
}
}
</script>
About.vue
<script>
export default {
name: 'about',
components: {
},
created: function () {
this.$store.dispatch('setY', 'Y')
}
}
</script>
Console log in the Components tab
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 X
store.js?c0d6:13 Y
backend.js:1585 vue-devtools Detected Vue v2.6.10
Console log in the Vuex tab
log.js?1afd:24 [HMR] Waiting for update signal from WDS...
store.js?c0d6:22 X
store.js?c0d6:13 Y
backend.js:1585 vue-devtools Detected Vue v2.6.10
store.js?c0d6:13 null
backend.js:14674 Uncaught TypeError: Cannot set property 'x' of null
at Store.SET_X (store.js?c0d6:14)
at wrappedMutationHandler (vuex.esm.js?2ba1:725)
at backend.js:14664
...