Question

我正在向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
    }

})();

我的意图是在handle内使用actions发出各种异步请求，但这显然要等到handle解决之后才能实现。

我在这里有些茫然，我不确定放置这个最佳位置在哪里。我想我可以在初始化Vue应用程序之前全局初始化handle，但是从结构上讲，这使初始化与使用位置相去甚远。有没有做这种事情的典型方法？

任何帮助将不胜感激！

Answer 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。

Answer 2

您需要在商店内创建actions（仅是方法）

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

你也可以写这个

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

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

2 个答案: