Typescript 作為 Javascript 的超集，越來越流行硼瓣，是前端未來的一種趨勢究飞。Vue 早已經(jīng)支持了 Typescript，這里記錄一下 Vuex 結(jié)合 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 有四個參數(shù)瘟栖，name 為模塊名字葵擎；namespaced 表示開啟命名空間；將dynamic設(shè)置為true時慢宗，表示創(chuàng)建動態(tài)模塊坪蚁，運行時將模塊注冊到存儲中奔穿；
// ***.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
}
}
