Загружать пакет внутри действия Vuex, только когда он отправлен

Question

Я хочу импортировать пакет, чтобы использовать его в действии Vuex, но только когда отправлено действие, чтобы сэкономить на размере входного пакета.

Моя попытка решения:

export const actions = {
  async createNewBin(store, bin) {
    const firebase = require('firebase/app');
    require('firebase/firestore');

    const collectionRef = firebase.firestore().collection('bins');

    try {
      const docRef = await collectionRef.add(bin);
      return docRef;
    } catch (e) {
      return e;
    }
  }
}

firebase/firestore находится внутри моего файла ввода, и я не хочу этого.

Answer 1

Также вы можете найти более подробную информацию об этом подходе здесь

Как и когда (не) использовать веб-пакет для отложенной загрузки?

В общем, решение может быть таким, как Эрик, отвечает async / await

const { default: firebase } = await import(/* webpackChunkName: "firebase" */ 'firebase')

Или так с Promise

if(iWantToLoadMyModule){
    import('myModule').then( myModule =>{
        // do something with myModule.default
    });
}

Answer 2

Это должно работать. https://webpack.js.org/guides/code-splitting/#dynamic-imports

export const actions = {
    async createNewBin(store, bin) {
        const { default: firebase } = await import(
            /* webpackChunkName: "firebase" */ 'firebase')

        // You may want code that checks if firebase is already initialized.
        // Unsure if initializing multiple times throws an error.
        firebase.initializeApp({
            // your init options
        });

        const collectionRef = firebase.firestore().collection('bins');

        try {
            const docRef = await collectionRef.add(bin);
            return docRef;
        } catch (e) {
            return e;
        }
    }
  }