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使用基于类的方式来编写. 往后将继续深入学习.