Vuex, nuxt, localStoarage, state overwrite

Question

i have question about state managment in vue/vuex

• i use 'nuxt-vuex-localstorage' for persistence
• i divided my store into modules like 'ui', 'user'

The problem is that when in one action i dispatch two store actions like

const res = await API_CALL('someEndpoint')
this.$store.dispatch('ui/setSignInVisible', false)
this.$store.dispatch('customer/setToken', res.token)

this gives me errors because first i get setSignInVisible to false, but this next acion set it to true. I assume this happened because localStorage operation is async.

this solve this issue:

const res = await API_CALL('someEndpoint')
await this.$store.dispatch('ui/setSignInVisible', false)
this.$store.dispatch('customer/setToken', res.token)

But my question is, should this work this way, or there is some better approach to manage state. Approach in which i will not worry about of overriding state.

Answer 1

So in the line below, you have an atomic value false being passed to an action or dispatch method which is presumably being used to set the value of this.$store.state.ui.signInVisible to false.

await this.$store.dispatch('ui/setSignInVisible', false)

Mutations in vuex are not allowed to be async, actions are. They are not inherently async. So for the sake of consistancy, some developers like to set all of their properties through actions even though some are synchronous in nature. So you could call:

this.$store.commit('ui/setSignInInivisible', false)

You could also set it directry in the state this.$store.state.ui.signInVisible = false Or you could try using vuex function mapMutations to put them in the methods section of your component and call them directly. Also not sure why you would put localStorage into vuex since you can access it from everywhere.