我有一个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调用?