如何在 Vuex 状态中使用异步初始化的 API? [英] How to use an API, that is initialized asynchronously, inside a Vuex state?

问题描述

我正在向 Vue + Vuex 介绍自己，但我很难弄清楚在哪里初始化具有异步初始化方法的 API.

I'm introducing myself to Vue + Vuex and I'm having a hard time figuring out where to initialize an API that has an async initialization method.

我显然不能在这样的异步函数之外await:

I obviously can't await outside an async function like this:

import { RequestSystemProxy } from "../../assets/scripts/RequestSystemProxy"

const system = new RequestSystemProxy();

const handle = await system.Initialize();

const state = { ... };

const getters = { ... };

const actions = { ... methods that use 'handle' ... };

const mutations = { ... };

export default {
    state,
    getters,
    actions,
    mutations
}

当我导出这样的承诺时，Vue 不喜欢它:

and Vue doesn't like it when I export a promise like this:

import { RequestSystemProxy } from "../../assets/scripts/RequestSystemProxy"

export default (async function () {

    const system = new RequestSystemProxy();

    const handle = await system.Initialize();

    const state = { ... };

    const getters = { ... };

    const actions = { ... methods that use 'handle' ... };

    const mutations = { ... };

    return {
        state,
        getters,
        actions,
        mutations
    }

})();

我的目的是在 actions 中使用 handle 来发出各种异步请求，但这显然在 handle 解决之前不会发生.

My intention is to use handle inside actions to make various async requests but that obviously can't happen until the handle has resolved.

我在这里有点不知所措，我不确定把它放在哪里最好.我想我可以在初始化 Vue 应用程序之前全局初始化 handle ，但这使初始化在结构上远离它的使用位置.有没有一种典型的方法来做这样的事情?

I'm at a bit of a loss here, I'm not sure where the best place to put this is. I suppose I could initialize handle globally, before I initialize the Vue app, but that puts the initialization, structurally, pretty far away from where it's used. Is there a typical approach for doing something like this?

任何帮助将不胜感激！

推荐答案

动作可以是异步的，所以只需存储对 system.Initialize() 承诺的引用，并通过等待该承诺来为每个动作添加前缀来解决.

Actions can be asynchronous so just store a reference to your system.Initialize() promise and prefix each action by waiting for that promise to resolve.

import { RequestSystemProxy } from '../../assets/scripts/RequestSystemProxy'

const system = new RequestSystemProxy()
const initPromise = system.Initialize()

const state = { ... }

const getters = { ... }

const mutations = { ... }

const actions = {
  async exampleAction (context) {
    const handle = await initPromise
    // now use handle 
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

<小时>

另一种选择是让你的模块(我们称之为 store.js)导出一个 promise

---

Another option is to have your module (let's call it store.js) export a promise

import { RequestSystemProxy } from '../../assets/scripts/RequestSystemProxy'

const system = new RequestSystemProxy()

export default system.Initialize().then(handle => {
  // now initialize your store...

  return {
    state,
    getters,
    // etc

  }
})

然后在你的 main.js(或其他)中使用 promise

and then consume the promise in your main.js (or whatever)

import storePromise from 'path/to/store.js'

storePromise.then(store => {
  new Vue({
    store,
    // etc
  }).$mount('#app')
})

注意:这需要考虑在初始化和挂载根 Vue 实例之前如何处理 UI.

Note: This would require consideration of how you handle the UI before the root Vue instance is initialized and mounted.

这篇关于如何在 Vuex 状态中使用异步初始化的 API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！