gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 15:40:02 25 4
gpt4 key购买 nike

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

  • 有没有办法在继续之前等待 api 调用的响应?或者是否有不同/更好的方式来执行这个 api 调用?

    最佳答案

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

    关于session - 如何在 Nuxt.js 中实现异步中间件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46744764/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com