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

会话 Vue.js

小胖Gil

2020-03-23

我有一个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.userundefined在这一点上。
  • 我正在使用vue-i18n插件翻译页面。它从商店中的会话获取其初始语言环境。但是,由于此会话在被检索时为空,因此i18n始终使用后备语言环境。

有没有办法在继续之前等待api调用的响应?还是有其他/更好的方式来执行此api调用?

第2958篇《如何在Nuxt.js中实现异步中间件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android