vuex-modules-expand

一款简单便捷超级好用的VueX按模块化动态挂载的插件vuex-modules-expand，他来啦，同步支持vue2和vue3，高效分割庞大Vuex代码，有效降低vue项目首页白屏问题。支持组件间动态复用vuex模块，且同时支持单组件同时动态复用一个或多个vuex模块。GitHub仓库 喜欢的话给个Stars支持一下吧。嘻嘻

Install

npm install vuex-modules-expand

Import

// main.js
import { createApp } from "vue"; // 依赖vue (rely on Vue)
import store from "./store";
import vuexModuleExpand from "vuex-modules-expand"; // vuex按模块需求动态载入(Dynamic loading as required by the module)

Use

// main.js
app.use(vuexModuleExpand);// 注册插件(To register the plugin)

Vue

<template>
  <div>
  </div>
</template>

<script>
// @ is an alias to /src
import { onBeforeMount, toRefs, reactive, getCurrentInstance } from "vue";
// 从 vuex 中导入 useStore 方法
import { useStore } from "vuex";
/**
 * 重要参数说明：
 * isVuex--在组件模块中定义此属性，为boolean类型 接收值 true/false；
 * fitVuexModuleName--在组件模块中定义此属性，为String类型 或者Array<String> 类型，接收值例如："Login"/["Login", "ContractFilmList"]；
 */
export default {
  isVuex: true, // 是否使用动态加载的vux模块
  fitVuexModuleName: "Contract", // 如果不指定 默认取值name
  name: "contant", // 如果不指定 默认取此值
  components: {},
  setup() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
</style>

Description

此插件用于按模块化动态分割按需注册vuex

// this.$options对象即为例如.vue文件中 export default 导出的模块属性对象集合
// this.$options.fitVuexModuleName 取值取的为自定义使用vuex仓库的指定模块的名称。 如果不指定 默认取值 this.$options.name 模块名 name

Author List

@kaysem 转载请注明出处。