Question

我有一个Nuxt中间件文件，它从外部api获取会话。此会话用于设置区域设置等内容，因此在加载任何页面之前获取它是很重要的。目前它看起来像这样：

中间件/ session.js

import axios from 'axios'

export default function ({ store }) {
  axios.get('http://example.com/getsession')
    .then(response => {
      store.commit('setSession', response)
    })
    .catch(() => {
      store.commit('clearSession')
    })
}

商品/ index.js

export const state = () => ({
  session: {}
})

export const mutations = {
  setSession (state, session) {
    state.session = session || {}
  },
  clearSession (state) {
    state.session = {}
  }
}

export const getters = {
  session (state) {
    return state.session || {}
  }
}

使用Axios获取会话并存储在Vuex存储中。但是，由于它是异步的，因此这些数据不会立即可用，而试图从商店获取会话的插件或其他中间件只会获得一个空对象（这是默认设置）。

这会破坏事情的例子：

用于某些路由的另一个中间件会检查用户是否已根据session.user登录。该会话仍为空，因此此时session.user为undefined。
我使用vue-i18n插件翻译页面。它从商店中的会话中获取其初始区域设置。但由于此会话在检索时是空的，因此i18n始终使用回退区域设置。

有没有办法在继续之前等待api调用的响应？或者是否可能有不同/更好的方式来执行此api调用？

Answer 1

来自Nuxt文档："A middleware can be asynchronous. To do this, simply return a Promise or use the 2nd callback argument"

因此，这样的事情应该有效，因为axios会返回一个承诺：

import axios from 'axios'

export default function ({ store }) {
  return axios.get('http://example.com/getsession')
    .then(response => {
      store.commit('setSession', response)
    })
    .catch(() => {
      store.commit('clearSession')
    })
}

如何在Nuxt.js

1 个答案: