Vuex Data doesn't get updated on fetch when reloading browser (SSR) Nuxt-CodePudding

Component codes

  async fetch(){ await this.$store.dispatch('bots/getBots') },
  computed: { ...mapState('bots', ['bots']) },

Store codes

export const state = () => {
  return {
    bots: []
  }
}

export const mutations = {
  UPDATE_BOTS(state, bots) {
    state.bots = bots
  }
}

export const actions = {
  getBots({commit}) {
    this.$axios.$get('url', {headers: {uid: '12345'}})
      .then(res => {
        commit('UPDATE_BOTS',res.robots)
      })
      .catch(e => {
        console.log(e)
      })
  }
}

Issue: When moving between pages via nuxt-link data loads perfectly but when I reload the page bots state is empty...

CodePudding user response：

It is the expected behavior. Vuex state is kept in memory and when you reload the page it gets purged.

CodePudding user response：

Instead of this state

export const state = () => {
  return {
    bots: []
  }
}

try this

export const state = () => ({
    bots: []
})