vite+vue对于vuex分模块的封装

封装思路：

安装vuex=>创建store文件夹=>创建index.js=>创建模块文件夹modules（用于拆分不同的store）=>app引用=>业务部分获取store以及发起修改

一：安装

npm安装：

npm install vuex@next --save

yarn安装

yarn add vuex@next --save

二：创建store文件夹

三：创建index.js

import { createStore } from 'vuex'
// 直接引入所有的模块
const modulesFiles = import.meta.globEager('./modules/**/*.js') || import.meta.globEager('./modules/**/*.ts')
const modules = {}
for (const key in modulesFiles) {
  modules[key.replace(/(\.\/modules\/|\.js)/g, '')] = modulesFiles[key].default
}

Object.keys(modules).forEach(item => {
  modules[item]['namespaced'] = true
})
const store = createStore({
  modules,
})
export default store;

四：创建模块文件夹modules

 modules/global.js文件内容

const state = {
   // 是否显示辅助线
   showHelperLine:true
};
const getters = {
};
const mutations = {
  setShowHelperLine(state, visible) {
    state.showHelperLine = visible
  },
};
const actions = {
};

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

五：app引用（引用的位置是main.js，若是typescript，则是main.ts）

六：业务部分获取store以及发起修改

import {computed } from "vue";
import { useStore } from "vuex";
const store = useStore();

// 是否显示辅助线 获取时，一定要加上模块名
const showHelper = computed(() => store.state.global.showHelperLine);

//修改
const switchHelper = (val) => {
  //注意：修改时候，一定要加上模块名
  store.commit("global/setShowHelperLine", val);
};