Vuex + Typescript

Typescript 作为 Javascript 的超集，越来越流行，是前端未来的一种趋势。Vue 早已经支持了 Typescript，这里记录一下 Vuex 结合 Typescript 的写法。

主要用了工具 vuex-module-decorators，装饰器的用法。

// store/index.ts
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({});

// store/a.ts
import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators';
import store from '@/store';

@Module({ name: 'a', dynamic: true, namespaced: true, store })
export default class A extends VuexModule {
  // state
  name = 'moduleA'

  @Mutation
  changeName(name: string) {
    this.name = name
  }

  @Action
  asyncChangeName () {
    // 用 setTimeout 异步模拟访问 api
    setTimeout(() => {
      this.changeName('aaa')
    }, 200)
  }
}

export const ModuleA = getModule(A);

@Module 有四个参数，name 为模块名字；namespaced 表示开启命名空间；将dynamic设置为true时，表示创建动态模块，运行时将模块注册到存储中；

// ***.vue
import { ModuleA } from '@/store/a';

export default class *** extends Vue {
   get moduleName(): string {
    return this.$store.state.a.name
  }

  // method
  changeModuleName(): void {
    this.$store.commit('changeName', 'moduleA alert')    // 提交 mutation
    ModuleA.asyncChangeName()   // 提交 action
  }
}