store/index.ts

import Vue from 'vue';
import Vuex from 'vuex';

import Auth from './modules/auth';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    Auth
  },
  state: {},
  mutations: {},
  actions: {}
});

store/modules/auth.ts

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';
@Module({name: 'Auth', namespaced: true, stateFactory: true})
export default class Auth extends VuexModule {
  public count = 12;
  get getCount() {
    return this.count;
  }

  // action 'decr' commits mutation 'decrement' when done with return value as payload
  @Action({ commit: 'decrement' })
  public async decr() {
    return 3;
  }

  @Mutation
  private decrement(delta: number) {
    console.log('delta', delta);
    this.count -= delta;
  }
}

调用示例

import store from '@/store';
import { getModule } from 'vuex-module-decorators';
import Auth from '@/store/modules/auth';
const auth = getModule(Auth, store);

auth.decr().then((v: number) => {
    console.log(v);
    console.log(auth.getCount);
    console.log(this.$store.getters['auth/getCount']);
});

大前端知识库收集分享 www.rjxgc.com 壹玖零Tech
搜罗各种前后端奇淫技巧，花式编程思想，日日更新，速来围观吧...