vue+typescript最近在学习typescript，练习一个结合vue的demo。本次demo将涉及以下知识点vue-class-componentvuex-class参考文章https://github.com/vuejs/vue-class-componenthttps://github.com/Armour/vue-typescript-admin-templatehttps：//championswimmer.in/vuex-module-decorators/创建一个vue项目1.安装vue-cliyarnglobaladd@vue/clivue--version//@vue/cli4.1.12。Createavueproject//使用ui界面新建一个项目，当然这里也可以使用命令方式vueui查看typescript，等待安装。安装vuex-module-decoratorsyarn添加支持vuexclass模式的vuex-module-decorators添加计数器逻辑代码cdvue-typescript/src/viewstouchCounter.vue添加如下内容（代码无法格式化，图片代替）/src/views/counter.vue修改/src/store/index.ts添加一个vuex-module/src/store/counter.ts先是/src/store/index.ts。您会看到导出的商店中没有模块。这是因为模块在创建时会被动态导入。然后添加一个VuexModuleWithUpdater，这个类的用处是为所有模块定义了一个公共方法$updateState，这个方法可以接受一个对象来更新模块中的状态，本质上是一个mutation./src/stroe/couter。ts定义了状态和模块接口，这些接口将在vue组件中使用。然后注意几个地方。@Module({name:'counter',dynamic:true,store})中的dynamic意味着这个模块将被动态导入。store是根据store导入的目标。在导出该模块时，需要使用getModule。最后看页面组件(/src/views/Counter.vue).importCounterModule,{ICounter}from'@/store/modules/counter'class{getcounterIns():ICounter{returnCounterModule}}先导入关联模块，然后通过计算属性将模块实例挂载到当前vue组件中。这个counterIns实例会包含所有的属性和方法（这和之前vue注入状态和动作的方式不同）。最后，这个demo主要涉及两个库，vue-property-decorator和vuex-module-decorators，可以让vue和vuex以类的方式编写。今后我们将继续深入研究。
