vueX学习看这篇就够了

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 Tabs from './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',
});

vuex-class

vuex-class是vuex和vue-class-component的绑定助手,包装了vuex, 简化了代码。结合ts很便于代码的维护余拓展。