如何在 Vuex 状态中使用异步初始化的 API？答案

【问题标题】：How to use an API, that is initialized asynchronously, inside a Vuex state?如何在 Vuex 状态中使用异步初始化的 API？
【发布时间】：2020-03-20 02:55:40
【问题描述】：

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

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

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 不喜欢它：

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 解决之前不会发生。

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

任何帮助将不胜感激！

【问题讨论】：

看起来您正在尝试执行该函数，同时以结尾 () 导出它。尝试只做 export default async () => {}
@DevonNorris 我认为 OP 意味着执行该功能
对我来说似乎是一种反模式，但 idk
我的意思是执行该功能。我不想返回函数本身，我想立即调用函数并导出它的结果{ state, getters, actions, mutations }
我认为你应该将这个函数/文件导入到你想使用它的文件中。在另一个函数中，只需调用const { state, getters, actions, mutations } = await fileImport()

标签： javascript vue.js vuex

【解决方案1】：

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

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）导出一个承诺

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（或其他）中使用承诺

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

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

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

【讨论】：

【解决方案2】：

你需要在你的商店中创建actions（这只是方法而已）

const actions = {
  async actionName({ state }) {
    // write your code in here
  },
}

你也可以这样写

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
};

【讨论】：