如何在Nuxt.js中实现异步中间件

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 文档：“中间件可以是异步的。要做到这一点，只需返回一个 Promise 或使用第二个回调参数”

因此，这样的事情应该可以工作，因为 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')
    })
}