在 nuxtServerInit 操作中使用 axios 进行 http 调用

Question

我正在开发一个从 WordPress API 获取内容的静态网站。

在网站的菜单上，我希望将内容保存在 nuxt 商店中，并在导航组件上可用。

我重新阅读了 nuxt 服务器和 nuxtServerInit 操作的文档，但我没有找到一个很好的示例来说明如何在此操作中进行轴子调用，并能够获取组件上的存储。

我找到了这个，但它不起作用..https://github.com/nuxt/nuxt.js/issues/2307

非常感谢您的帮助。

Answer 1

试试这个

存储/index.js

export const state = () => ({
  data: null
})

export const actions = {
  // nuxtServerInit is called by Nuxt.js before server-rendering every page
  async nuxtServerInit({ commit, dispatch }) {
    await dispatch('storeDispatchFunc')
  },

  // axios...
  async storeDispatchFunc({ commit }) {
    const { data } = await this.$axios.get('/api/wp....')
    commit('SET_DATA', data)
  },
}

export const mutations = {
  SET_DATA(state, theData) {
    state.data = theData
  }
}