Nuxt.js Vuex module not working as expected

Question

I'm having problems with Nuxt's Vuex using it in modules.

It turns out that the state is being declared and appears in Vuex, the actions are triggered, but the mutation changes the state instance, but do not commit the change and do not even trigger the event, as it does not appear in the Vuex devtools console, below Vuex module code.

Note: in both console.log() print the state, in the first, empty, as it was declared, and in the second, the changed state, but the change does not really reflect in Vuex.

export const strict = false
export const state = () => ({
  address: {}
})

export const mutations = {
  setShopAddress(state, address) {
    console.log(state)
    state.address = address
    console.log(state)
  }
}

export const actions = {
  getAddress({
    commit
  }) {
    this.$axios
      .get('/general/address')
      .then((response) => {
        commit('setShopAddress', response.data)
      })
      .catch((e) => console.error(e))
  },
  setAddress(vuexContext, address) {
    vuexContext.commit('setShopAddress', address)
  }
}

export const getters = {
  getShopAddress(state) {
    return state.address
  }
}

Leonardo Ebert · Accepted Answer · 2020-03-30 14:41:55Z

1

After many hours and thanks to a group of Nuxt on Telegram I was able to find the solution, I just needed to put an async on nuxtServerInit and an await on the call to action.

Code below:

async nuxtServerInit({ dispatch }) {
    await dispatch('module/action')
},

I hope my answer helps more people

answered Mar 30, 2020 at 14:41

Leonardo Ebert

1391 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nuxt.js Vuex module not working as expected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related