vue+typescript 学习笔记

vue + typescript

最近在学习typescript,并结合vue练习一个demo.在这个demo将涉及如下知识点

1. vue-class-component
2. vuex-class

参考文章

1. https://github.com/vuejs/vue-class-component
2. https://github.com/Armour/vue-typescript-admin-template
3. https://championswimmer.in/vuex-module-decorators/

建立一个vue项目

1.安装vue-cli

yarn global add @vue/cli

vue --version
// @vue/cli 4.1.1

2.建立vue项目

// 使用ui界面建立新项目, 固然也能够使用命令的方式
vue ui

这里要勾选typescript

等待安装.

安装支持vuexclass模式的vuex-module-decorators

yarn add vuex-module-decorators

添加counter逻辑代码

cd vue-typescript/src/views
touch Counter.vue

添加如下内容(代码没法格式化,图片代替)
/src/views/Counter.vue

修改/src/store/index.ts

添加一个vuex-module
/src/store/counter.ts

1. 首先是/src/store/index.ts. 会看到,这个导出的store中没有module. 这是由于module会在建立时动态导入.而后是添加了一个VuexModuleWithUpdater, 这个类的用处是给全部的module定义一个公共方法$updateState, 而这个方法能够接受一个对象来更新module中的state, 其本质是一个mutation.
2. /src/stroe/couter.ts中, 定义了state和module的接口,这些接口将会在vue组件中使用到.
3. 而后注意几个地方. @Module({ name: 'counter', dynamic: true, store })中的dynamic表示这个module将动态导入. store则是导入的目标根据store. 在导出这个module时, 须要使用getModule.

4. 最后来看页面组件(/src/views/Counter.vue).

   import  CounterModule, { ICounter } from  '@/store/modules/counter'
   class {
       get  counterIns():  ICounter {
           return  CounterModule
       }
   }

   先导入关联的module, 而后经过computed属性将module的实例挂载到当前的vue组件中.这个counterIns实例将包含全部的属性和方法(这与之前的vue注入state和actions的方式有所不一样).

最后

在本demo主要涉及vue-property-decorator和vuex-module-decorators这两个库,能够让vue和vuex使用基于类的方式来编写. 日后将继续深刻学习.