vue3.0自动导入vuex的子模块

一、前提

我们使用的是require.context方法导入，在vite创建的项目内使用会报错"require not found"，所以必须用webpack创建项目。或者有大能可以说说vite怎么解决这个问题。
2021年5月17日，经过几天的尝试，vite2创建的项目可以实现自动导入啦。

二、webpack项目导入

//  src/store/index.ts

import { createStore } from 'vuex'
import {StateType} from "./leixing";			// 万恶的ts需要的接口，不是vuex的子模块
import VuexPersistence from 'vuex-persist'		// 自动保存vuex数据，刷新时不丢失数据的模块


// 自动注入所有 ./store 下的 vuex 子模块，其中leixing.ts和index.ts不需要注入，
const files = require.context('@/store', false, /^(?!.*(?:(index|leixing).ts$)).*\.ts$/)
const modules: StateType = {}
files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default
})

const store = createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: modules,
  plugins: [new VuexPersistence().plugin],			// 刷新不丢失数据的配置
})
console.log(modules,"查看vuex里面都有什么")
export default store

三、vite2项目导入

import { createStore } from 'vuex'
import {StateType} from "./leixing";		// 万恶的ts需要的接口，不是vuex的子模块
import VuexPersistence from 'vuex-persist'		// 自动保存vuex数据，刷新时不丢失数据的模块

// 自动保存vuex数据
const baocunshuju = new VuexPersistence({
    storage: window.sessionStorage
})


// vite版自动导入vuex
// 这次我将需要导入的文件放到store/modules文件夹下面了
//  import.meta.globEager的参数必须是绝对路径或者相对路径，不能是路径别名。也就是以点和斜杠开头的字符串。
let modules = {}
const modulesFiles = import.meta.globEager('./modules/*.ts')
// console.log(modulesFiles,"过滤出多少个")
for (const path in modulesFiles) {
    const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2')
    // console.log(moduleName,"模块名字")
    // modules = { ...modules, ...modulesFiles[path] }
    modules = {...modules,[moduleName]:modulesFiles[path].default}
}
// console.log(modules,"结果")

const store = createStore({
    state: {
    },
    mutations: {
    },
    actions: {
    },
    modules: modules,
    plugins: [baocunshuju.plugin],
})
console.log(modules,"vuex")
export default store