一、store中如何配置
1.index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import { UserStateType } from './modules/user';
Vue.use(Vuex);
export interface IRootState {
user: UserStateType;
}
export default new Vuex.Store<IRootState>({});
2.user.ts
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators';
import store from '@/store';
export interface UserStateType {
token: string;
rootGroupId: number;
}
@Module({ dynamic: true, store, namespaced: true, name: 'user' })
class user extends VuexModule implements UserStateType {
public token = '';
public rootGroupId = 0;
@Mutation
public SET_TOKEN(token: string) {
this.token = token;
}
@Action
public setToken(token: string) {
this.SET_TOKEN(token);
}
@Action
public getToken() {
return this.token;
}
get getRootGroupId() {
return this.rootGroupId;
}
@Mutation
SET_ROOT_GROUP_ID(params: number): void {
this.rootGroupId = params;
}
@Action
setRootGroupId(params: number): void {
this.context.commit('SET_ROOT_GROUP_ID', params);
}
}
export const UserModule = getModule(user);
二、如何使用vuex
import { UserModule } from '../store/modules/user';
UserModule.setRootGroupId(8);
get sidebar() {
return UserModule.rootGroupId;
}