vue+typescript 学习笔记

2020-08-02T21:03:04
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

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中, 定义了statemodule的接口,这些接口将会在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注入stateactions的方式有所不同).

最后

在本demo主要涉及vue-property-decoratorvuex-module-decorators这两个库,可以让vuevuex使用基于类的方式来编写. 往后将继续深入学习.

扫一扫关注公众号添加购物返利助手,领红包
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。