nuxt.js - Nuxt vuex 商店未收到 axios 请求

Question

已安装 Nuxt axios 模块并在 index.js 文件中工作，但是当我清空 index.js 文件并分离到其自己的模块文件 (team.js) 中时，它不起作用。

团队.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)
}

在 Vue 开发工具中它显示为 - 团队:对象 团队:对象(空) 拥有 Vuex 模块的正确方法是什么？我见过的文档和其他项目应该可以工作

Answer 1

根据我的评论和来源建议，您的 store/teams.js 文件可以拥有自己的 nuxtServerInit；但您可以将其命名为任何您想要的名称，因为您需要从主模块 (store/index.js) 显式分派(dispatch)它。

---

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')
  }
}