Menu
In a simple application, I create a simple set of mutations and actions that are tied to the component creation hook. In browser, after pressing F5, when vue-devtools opened on Vuex tab I get an error at the start of the application, although this should not happen.
Main question: why state is 'null' and how to change it?
store.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)
}
}
})
Home.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>
About.vue
<script>
export default {
name: 'home',
components: {
},
created: function () {
this.$store.dispatch('setB', 'B')
}
}
</script>
Console log on Components tab
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
Console log on Vuex tab
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
329
To persist Vuex state on page refresh, we can use the vuex-persistedstate package. import { Store } from "vuex"; import createPersistedState from "vuex-persistedstate"; import * as Cookies from "js-cookie"; const store = new Store({ // ...
To keep Vuex state on page refresh with Vue. js, we use the vuex-persistedstate package. import Vue from "vue"; import Vuex from "vuex"; import createPersistedState from "vuex-persistedstate"; Vue. use(Vuex); export default new Vuex.
In Vuex, mutations are synchronous transactions: store. commit('increment') // any state change that the "increment" mutation may cause // should be done at this moment.
Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations.
It was "New Vuex backend" in devtools settings.
I don`t know what is the catch, but disable this option solves my problem.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
