vuex就是为了实现全局状态管理
vuex有哪些东西？
- state【状态】
- getter【可以认为是 store 的计算属性，不会修改状态】
- mutation【唯一修改state的方法，不支持异步】
- action【不能直接修改state,通过触发mutation修改状态，支持异步】
- moudle【模块，用于Vuex的拆分和分模块管理】
- 一些辅助函数……
详情查看
关于Vuex的拆分和分模块组织管理
一般来说有两种思路
1.对vuex进行拆分，state\getter……单独放入不同文件然后引入。
2.业务拆分be like
也就是根据不同的业务需求
随便举个例子：Tabs.ts
import router from "@/router/index";
import { ElMessageBox } from "element-plus";
import { Commit } from "vuex";
class State {
activeFrontTab!: any;
activeBackstageTab!: any;
}
const state: State = new State();
const mutations = {
// 改变活跃的activeTab
CHANGE_ACTIVE_TAB(state: State, data: any) {
if (data.type == 2) {
state.activeBackstageTab = data.data;
} else {
state.activeFrontTab = data.data;
}
},
};
const actions = {
changeActiveTab(context: { commit: Commit; getters: any }, data: any) {
context.commit("CHANGE_ACTIVE_TAB", data);
},
};
const getters = {
activeFrontTab: (state: State) => state.activeFrontTab, // 活跃的tab
activeBackstageTab: (state: State) => state.activeBackstageTab, // 活跃的tab
};
export default {
namespaced: true,
state,
actions,
mutations,
getters,
};
index.ts
import Vue from 'vue'
import Vuex from 'vuex'
import Tabsfrom './modules/Tabs'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
Tabs
},
strict: ture
//在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
})
或者使用批量加载
import { createStore } from 'vuex';
//当刷新页面,项目重新加载,vuex 会重置,所有状态回到初始状态,使用 vuex-persistedstate 可以避免这种情况。
import createPersistedState from "vuex-persistedstate";
const modulesFiles = require.context("./modules", true, /\.ts$/);
// 提取出modules文件夹中所有ts文件 并 设置为modules入口参数
const modules = modulesFiles.keys().reduce((modules: any, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});
export default createStore({
modules,
plugins: [createPersistedState()],
strict: process.env.NODE_ENV !== 'production',
});
