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

Question

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

中间件/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')
    })
}

store/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 || {}
  }
}

session 使用 Axios 获取并存储在 Vuex 存储中。但是，由于它是异步的，因此该数据无法立即使用，并且尝试从存储中获取 session 的插件或其他中间件只会获取一个空对象(这是默认值)。

这会破坏事物的示例:

另一个用于某些路由的中间件会根据 session.user 检查用户是否已登录。 . session 仍然是空的，因此 session.user是 undefined这一点。

我正在使用 vue-i18n 插件来翻译页面。它从存储中的 session 中获取其初始语言环境。但是由于此 session 在检索时为空，因此 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 返回一个 promise :

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