vue项目自然少不了VUEX了,这里使用vuex-module-decorators进行模块化分割.
npm install vuex-module-decorators 或者
yarn add vuex-module-decorators
安装成功后就可以使用了,先看一个完整案例
1.创建主配置文件index.ts
/**
* @description vuex 配置
* @author : lsx
* @version : v1.0
* @date : 2020/10/22 14:33
*/
import {
createStore} from "vuex";
import {
config} from "vuex-module-decorators";
import {
isDevMode} from "/@/utils/common";
config.rawError = true;
interface IState {
loading: boolean;
}
export default createStore({
state(): IState {
return {
loading: false,
};
},
strict: isDevMode(),
modules: {
}
});
2.创建模块注册文件registerModule.ts
import store from "/@/store";
export function registerModule(name: string) {
if (!name) {
return;
}
if ((store.state as any)[name]) {
store.unregisterModule(name);
}
}
- 模块vuex文件详解, 以sign.ts为例
import {
VuexModule, Module, getModule, Mutation, Action } from "vuex-module-decorators";
import store from "/@/store/index";
import {
registerModule } from "/@/store/vuexRegisterModule";
import {
ILoginData } from "/@/states/sign/login.interface";
import {
LOGIN } from "/@/api/sign"