在vue中使用ts

1,组件声明

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {}

2.data对象

import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component
export default class Test extends Vue {
  private name: string;
}

3.Prop 声明

 @Prop({ default: false }) private isCollapse!: boolean;
 @Prop({ default: true }) private isFirstLevel!: boolean;
 @Prop({ default: "" }) private basePath!: string;
 !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言

4.method 方法

  js 下是需要在 method 对象中声明方法，现变成如下

  public clickFunc(): void {
     console.log(this.name)
     console.log(this.msg)
  }

5.Watch 监听属性

  @Watch(path: string, options: WatchOptions = {})
       1.    immediate?:boolean 侦听开始之后是否立即调用该回调函数 
       2.   deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数

  用法：

  @Watch('arr', { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}
  @Watch('arr', { immediate: true, deep: true }) handleArr(newValue: number[], oldValue: number[]) {}

6.computed 计算属性

  1. allname 是计算后的值，name 是被监听的值

   public get allname() {
       return 'computed ' + this.name;
   }

7. 生命周期函数

 public created(): void {
     console.log('created');
 }

 public mounted():void{
     console.log('mounted')
  }

8. emit 事件

 ts

 import { Vue, Component, Emit } from 'vue-property-decorator'
 @Component  
 export default class MyComponent extends Vue {
     count = 0
     @Emit()
      addToCount(n:number){
            this.count+=n
      }
  }

 js 
 
 export default {
       data() {
           return{
                count:0
           }
        },
       methods :{
             addToCount(n){
                  this.count+=n
                   this.$emit('add-to-count',n)
             }
       }
  },

9. vuex

在使用 store 装饰器之前，先过一下传统的 store 用法吧

js:


export default  {
    namespaced:true,
    state:{
        foo:""
    },
    getters:{
        getFoo(state){ return state.foo}
    },
    mutations:{
        setFooSync(state,payload){
            state.foo = payload
        }
    },
    actions:{
        setFoo({commit},payload){
            commot("getFoo",payload)
        }
    }
}

ts:

import {VuexModule, Mutation,Action,getModule,Module} from "vuex-module-decorators";
VuexModule 用于基本属性
export default class TestModule extends VuexModule { 
   // VuexModule 提供了一些基本属性，包括 namespaced,state,getters,modules,mutations,actions,context
   //@Module 标记当前为 module
   // @Module({ dynamic: true, store, name: "settings" }) class Settings extends VuexModule
   // 配置的属性  
         1. namespaced:boolean 启/停用 分模块
         2. stateFactory:boolean 状态工厂
         3. dynamic:boolean 在 store 创建之后，再添加到 store 中。开启 dynamic 之后必须提供下面的属性
         4.  name:string 指定模块名称
         5.  store:Vuex.Store 实体 提供初始的 store


}

10. $refs使用

 let  luckyDraw=this.$refs.luckyDraw  as  any;
 if(luckyDraw){luckyDraw.doLottery(3,()=>{})}

11. 函数作为参数后跟fn: ()=>{}可避免出现eslint报错