vuex-module-decorators 使用记录 typescript vuex

vue结合typescript开发，使用静态类型可以提升项目的可维护性，使用接口结合编译器的智能提示，增强代码可读性和可扩展性。

那么使用vue，必不可少的就是vuex啦，因而项目使用到了vuex-module-decorators。

此处分享一下vuex-module-decorators的使用方法分享

入口文件：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']);
});

有问题可以点击【志同道合】菜单栏，找到我的邮箱给我发邮件交流。

也可以下方评论区留言呀~