Как использовать API, который инициализируется асинхронно, в состоянии Vuex?

Question

Я знакомлюсь с Vue + Vuex, и мне трудно понять, где инициализировать API, который имеет асинхронный c метод инициализации.

Я, очевидно, не могу await вне asyn c функции, подобной этой:

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, чтобы делать различные асин c запросы, но это, очевидно, не может произойти, пока не разрешится handle.

Я немного растерялся, Я не уверен, где это лучшее место. Я полагаю, что мог бы инициализировать handle глобально, прежде чем инициализировать приложение Vue, но это структурно отодвигает инициализацию от того места, где оно используется. Есть ли типичный подход к выполнению чего-то подобного?

Любая помощь будет очень признательна!

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

Примечание: Это потребует рассмотрения того, как вы обрабатываете пользовательский интерфейс, прежде чем экземпляр root Vue будет инициализирован и смонтирован.

Answer 2

Вам нужно создать actions (это не что иное, как метод) внутри вашего магазина

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

также вы можете написать это

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