How to use vuex-module-decorators - 10 common examples

component: FormVuex
    },
    {
      path: '/formvuexdec',
      name: 'formvuexdec',
      component: FormVuexDec
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ],
});

const module: UserModule = getModule(UserModule, store)
/**
 * 路由验证
 */
router.beforeEach((to, from, next) => {
  if (!to.meta.requireAuth) return next();

  // console.log("token:" + module.token)
  if (module.isTokenValid) return next();

  next({
    path: '/login',
    query: { redirect: to.fullPath }
  })
})

export default router;

//         updateNote(state, payload: { note: Note; sync: boolean }) {
//             const note = state.notes.find(n => n.uuid === payload.note.uuid);
//             if (note === undefined) return;
//             note.title = payload.note.title;
//             note.text = payload.note.text;
//             if (payload.sync) socket.emit("Note.Update", payload.note);
//         },
//         removeNote(state, payload: { note: Note; sync: boolean }) {
//             state.notes = state.notes.filter(n => n.uuid !== payload.note.uuid);
//             if (payload.sync) socket.emit("Note.Remove", payload.note.uuid);
//         },
//     },
// });

import coreStore from "../store";
export const store = getModule(GameStore, coreStore);

export default {
    async get(url: string, query?: any, option?: AxiosRequestConfig) {
        return await handleRequest(Methods.GET, url, null, query, option);
    },
    async post(url: string, body: any, query?: any, option?: AxiosRequestConfig) {
        return await handleRequest(Methods.POST, url, body, query, option);
    },
    async put(url: string, body?: any, query?: any, option?: AxiosRequestConfig) {
        return await handleRequest(Methods.PUT, url, body, query, option);
    },
    async delete(url: string, query?: any, option?: AxiosRequestConfig) {
        return await handleRequest(Methods.DELETE, url, null, query, option);
    },
}

const module: UserModule = getModule(UserModule, store)
/**
 * 鉴权拦截器
 */
axios.interceptors.request.use(
    config => {
        // 判断是否存在token，如果存在的话，则每个http header都加上token
        if (module.isTokenValid) config.headers.Authorization = module.authToken;
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);
axios.interceptors.response.use(
    response => {
        return response;

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'
import DialogViewModel from "@/common/viewmodels/dialogViewModel"

@Module({ name: "FormModule" })
export default class FormModule extends VuexModule {
    form: DialogViewModel = new DialogViewModel()

    @Mutation
    setForm(val: DialogViewModel) {
        this.form = val
    }
}

import { setSettings, getSettings } from "@/util/cookie";
import defaultSettings from "@/settings";

export interface ISettingsState {
  title: string;
  theme: string;
  fixedHeader: boolean;
  showSettings: boolean;
  showTagsView: boolean;
  showSidebarLogo: boolean;
  sidebarTextTheme: boolean;
  isDialog: boolean;
  menuBackgroundImg: any;
}

@Module({ dynamic: true, store, name: "settings" })
class Settings extends VuexModule implements ISettingsState {

  public title = defaultSettings.title;
  public theme = variables.theme;
  public fixedHeader = defaultSettings.fixedHeader;
  public showSettings = defaultSettings.showSettings;
  public showTagsView = defaultSettings.showTagsView;
  public showSidebarLogo = defaultSettings.showSidebarLogo;
  public sidebarTextTheme = defaultSettings.sidebarTextTheme;
  public isDialog = defaultSettings.isDialog;
  public menuBackgroundImg = defaultSettings.menuBackgroundImg;

  @Mutation
  private CHANGE_SETTING(payload: { key: string; value: any }) {
    const { key, value } = payload;
    if (Object.prototype.hasOwnProperty.call(this, key)) {

import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '@/store'
import elementVariables from '@/styles/element-variables.scss'
import defaultSettings from '@/settings'

export interface ISettingsState {
  theme: string
  fixedHeader: boolean
  showSettings: boolean
  showTagsView: boolean
  showSidebarLogo: boolean
  sidebarTextTheme: boolean
}

@Module({ dynamic: true, store, name: 'settings' })
class Settings extends VuexModule implements ISettingsState {
  public theme = elementVariables.theme
  public fixedHeader = defaultSettings.fixedHeader
  public showSettings = defaultSettings.showSettings
  public showTagsView = defaultSettings.showTagsView
  public showSidebarLogo = defaultSettings.showSidebarLogo
  public sidebarTextTheme = defaultSettings.sidebarTextTheme

  @Mutation
  private CHANGE_SETTING(payload: { key: string, value: any }) {
    const { key, value } = payload
    if (this.hasOwnProperty(key)) {
      (this as any)[key] = value
    }
  }

import { getToken, setToken, removeToken } from "@/util/cookie";
import { resetRouter } from "@/router";
import store from "@/store/modules/index";
import _request from "@/util/service";
import serviceUrl from "@/service/modules/user";

export interface IUserState {
  token: string;
  name: string;
  roles: Array;
  actionList: string[];
  menus: any[];
  info: any;
}

@Module({ dynamic: true, store, name: "user" })
class User extends VuexModule implements IUserState {
  public token = getToken() || "";
  public name = "";
  public roles: Array = [];
  public actionList: string[] = [];
  public menus: Array = [];
  public info = {};

  @Mutation
  private SET_TOKEN(token: string) {
    this.token = token;
  }

  @Mutation
  private SET_NAME(name: string) {
    this.name = name;

import { getToken, setToken, removeToken } from '@/utils/cookies'
import router, { resetRouter } from '@/router'
import { PermissionModule } from './permission'
import { TagsViewModule } from './tags-view'
import store from '@/store'

export interface IUserState {
  token: string
  name: string
  avatar: string
  introduction: string
  roles: string[]
  email: string
}

@Module({ dynamic: true, store, name: 'user' })
class User extends VuexModule implements IUserState {
  public token = getToken() || ''
  public name = ''
  public avatar = ''
  public introduction = ''
  public roles: string[] = []
  public email = ''

  @Mutation
  private SET_TOKEN(token: string) {
    this.token = token
  }

  @Mutation
  private SET_NAME(name: string) {
    this.name = name