vueX vue3自动引入匹配的modules

在Vue.js中使用Vuex时，可以通过import语句来手动引入模块。但如果想要让Vuex自动引用所有的模块，则需要进行配置。

使用工程化之前

// 引入modules,这里需要手动引入所有的模块，会导致代码冗余
import home from './modules/home'
import user from './modules/user'

export default createStore({
  getters, // 计算属性
  modules:{
    center,
    home,
    user
  } // 模块化
})

使用工程化之后

1. 创建一个Vuex模块文件夹，例如store/modules。
2. 在每个模块文件中，使用export default语句导出一个包含state、getters、mutations和actions的对象。

// 单一状态树
const state = {
  introdInfo: {
    name: "",
  }
};
// 计算属性
const getters = {
  introdInfo(state: State) {
    return state.introdInfo;
  }
};
//Action类似于Mutation,但是是用来代替Mutation进行异步操作的
const actions = {
  introdData({ commit }: any, param: any) {
    commit(INTROD_OBJECT, param);
  }
};
//mutations Vuex的store状态的更新唯一方式
const mutations = {
  [INTROD_OBJECT](state: State, data: any) {
    state.introdInfo = data;
  }
};

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

3. 在根模块文件中，使用require.context语句导入所有的模块。

//modules 集合所有的模块
const modules: any = {};
// 处理引入的模块
function importAll(routerArr: __WebpackModuleApi.RequireContext) {
  routerArr.keys().forEach((key: string) => {
    // 获取文件名,转为modules的key
    const fileName = key
      .replace(/^\.\//, "")
      .replace(/\.\w+$/, "")
      .replace(/_\w+$/, "");
    //取到文件内容
    const mObj = routerArr(key).default;
    modules[fileName] = mObj;
  });
}
//// 引入 modules 文件夹下的以 "_data.ts" 结尾的文件
importAll(require.context("./modules/", false, /_data\.ts/));

4. 在根模块文件中，使用modules属性来配置模块。

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules //// 模块化
})

5. 在组件中，使用vuex来访问Vuex的状态。

import { useStore } from "vuex";

  ……
  setup() {
    const store = useStore();

    const mDemoInfo = computed(() => {
      return store.getters["demo/introdInfo"];
    });

    onMounted(() =>{
      store.dispatch("demo/introdData",{name:"张三",age:30});
    });

    return {mDemoInfo};
  }
  ……

6. 在组件中显示Vuex的状态。

<div>vuex数据:{{mDemoInfo.name}}</div>

源码下载:https://gitee.com/leolee18/vue3-project

系列文档

vue3 两种创建方式详解(cli和vite)
vue.config.js/vite.config…
vue3 自动引入自定义组件
vueX vue3自动引入匹配的modules
vue3 自定义指令控制按钮权限的操作
vuex与axios网络请求解耦
移动端rem适配布局