如何在 vue 中导入外部模块？

Question

My code below is working fine:

import Vue from 'vue';
import Vuex from 'vuex';

import user from './modules/auth';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        user
    }
 });

Is there a shorter way to import a module instead of writing the statement at the top? I instead write it directly inside the modules like below:

export default new Vuex.Store({
    modules: {
        user: import('./modules/auth'),
    }
 });

But unfortunately it didn't work (the external module was not imported successfully).

Answer 1

Import with braces is different from import without braces - the latter imports the module statically (at compile time) while the former imports the module dynamically (at run time) and is not an ES6 feature but something specific to Webpack.

You can read more in the Webpack documentation but the most important thing is that dynamic imports (those with braces) return a Promise instead of module reference. The module reference will be available when the Promise resolves. You can read more about lazy-loading Vuex modules in this article https://itnext.io/vue-js-app-performance-optimization-part-3-lazy-loading-vuex-modules-ed67cf555976

Answer 2

Before beginning, I'm using Vue 3 + Vuex 4.

In the file path/to/store/index.js that hold the Vuex store I used the code like this.

// path/to/store/index.js
import { createStore } from 'vuex';
import moduleA from './modules/moduleA';
import moduleB from './modules/moduleB';

export default createStore({
  state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    moduleA,
    moduleB,
  },
});

And I created a file for each module as this

// file for each module
export default {
  state: { ... },
  mutations: { ... },
  getters: { ... },
  actions: { ... },
  modules: { ... },
};