CODEWITHSUNDEEP
nuxt.jsvuex-modules
Daniel Carr
Daniel Carr

Reputation: 491

Nuxt vuex store not getting axios request

Have Nuxt axios module installed and works in index.js file but when I empty the index.js file and separate into its own module file (team.js) it doesn't work.

Team.js

export const state = () => ({
  teams: {},
})

export const mutations = {
  SET_TEAMS (state, value) {
    state.teams = value
  }
}

export const actions = {
async nuxtServerInit ({ commit }) {
  let {data} = await this.$axios.$get(`team`)
  commit('SET_TEAMS', data)
}

In the Vue dev tools it shows as - teams: Object teams: Object (empty) what is the correct way to have Vuex modules? The documentation and other projects I've seen this should work

Upvotes: 2

Views: 4315

Answers (1)

Steve Hynding
Steve Hynding

Reputation: 1859

Following up on my comment and sourced advice, your store/teams.js file can have it's own nuxtServerInit; but you can name it whatever you want because you'll need to explicitly dispatch it from your primary module (store/index.js).

store/teams.js

export const actions = {
  async nuxtServerInit({ commit }) {
    let {data} = await this.$axios.$get(`team`)
      commit('SET_TEAMS', data)
    }
  }
}

store/index.js

export const actions = {
  async nuxtServerInit({ dispatch }) {
    dispatch('teams/nuxtServerInit')
  }
}

Upvotes: 2

Related Questions