vue TS使用props,vuex,mixins详解

在vue中使用TS相信大家网上能找到很多实践方案，我之前也写过一个DEMO，GIT地址:https://github.com/seizeDev/vue-ts

光有DEMO没有什么用，还是要具体到业务层中使用具体的API，所以给大家介绍一下，子组件怎么接受props，怎么引入vuex，怎么使用mixins,其实这些才是我们用TS+VUE的主要方案，TS是为了规范代码，规范书写格式和检查静态变量。

在vue 中使用TS最重要的插件就是vue-property-decorator,而这个插件主要是干什么的呢？可以看博客园这边文章：https://www.cnblogs.com/crazycode2/p/7821389.html，如果客官不想跳入的话，那我给大家简洁的说一下：

在vue-property-decorator里面有几个内置的装饰器，在JAVA中叫注解，其实我理解他们应该属于一类的，有以下几个装饰器：model（这个是双向数据绑定的，就是子传给父元素执行的）,component（初始注入，除了vue-property-decorator提供的，其他的VUE实例方法都在这里面注入）,watch（监听变化）,provide（组件内使用参数）,prop（子组件接收参数）.

使用方式： improt {Model,Component,Watch,Provide} from 'vue-property-decorator';

然后一项一项的来介绍：

1、model：

子元素

 
  import  
  { Component, Model } from  
  'vue-property-decorator' 
 

 
  @Component 
 

 
  export  
  default  
  class  
  MyCheckbox  
  extends  
  Vue { 
 

 
  @Model( 
  'change' 
  ) checked: boolean

 
  changed(ev) {

 
  this 
  .$emit( 
  'change' 
  , ev.target.checked)

}

}

父元素

 
  <template> 
 

 
  <div>

 
           
  <MyCheckbox :label= 
  "checkbox.label"  
  :id= 
  "checkbox.id"  
  v-model= 
  "checkbox.checked" 
  /> 
 

 
  </div>

 
  </template> 
 

 
  <script lang= 
  "ts" 
  > 
 

 
  import  
  Vue from  
  'vue' 
 

 
  import  
  {Component} from  
  'vue-property-decorator' 
 

 
  import  
  MyCheckbox from  
  './MyCheckBox.vue' 
 

 
  @Component({ 
 

 
  components: {

 
  MyCheckbox

}

})

这个主要是子传给父元素的NG-MODEL，但还有一种方式，就是在子元素中执行this.$emit('input',值);这种方式也可以直接改变在父元素绑定的ng-model的值

2、watch：

 
  <template> 
 

 
     
  <div  
  class 
  = 
  "hello" 
  > 
 

 
  <button @click= 
  "clicked" 
  >Click</button> {{sum.acum}}

 
  </div>

 
  </template> 
 

 
  <script lang= 
  "ts" 
  > 
 

 
  import  
  Vue from  
  'vue' 
 

 
  import  
  {Component, Watch} from  
  'vue-property-decorator' 
 

 
  @Component({ 
 

})

 
  export  
  default  
  class  
  Hello  
  extends  
  Vue { 
 

 
  sum = {

 
  acum: 0

}

 
     
  @Watch( 
  'sum' 
  , {deep:  
  true 
  }) 
 

 
  watchCount(newVal, oldVal) {

 
       
  console.log( 
  "newVal" 
  , newVal,  
  "oldVal" 
  , oldVal) 
 

}

 
  clicked() {

 
  this 
  .sum.acum++;

}

}

 
  </script> 
 

在这个方法中一定要注意： @Watch('sum', {deep: true})底下的那个方法是watch事件触发时执行的方法。你需要监听多少个参数，就需要@watch多少下

3、provide :

 
   /** 
   @augments 
  
 
    * 注入参数 
  
 
    */ 
  

    @ 
   Provide() 
  
 
   applyStatus: 
   Array< 
   any> = [ 
  

    { 
   id: [ 
   0, 
   3, 
   17], 
   title: 
   '审批中', 
   active: 
   true}, 
  

    { 
   id: [ 
   5, 
   8, 
   10, 
   13], 
   title: 
   '待发货', 
   active: 
   false}, 
  

    { 
   id: [ 
   14], 
   title: 
   '已发货', 
   active: 
   false}, 
  

    { 
   id: [ 
   1], 
   title: 
   '已取消', 
   active: 
   false}, 
  

    { 
   id: [ 
   4], 
   title: 
   '已拒绝', 
   active: 
   false} 
  

    ]; 
  
 
   config: 
   object = {} 
  
 
   cursor: 
   number = 
   1; 
   //当前在第几页 
  
 
   applyList: 
   Array< 
   any> = [] 
  
 
   loading: 
   boolean = 
   false 
   // 滚动触发的 
  
 
   clickGetList: 
   boolean = 
   false 
   // 是否点击触发的 
  
 
   mypagesize: 
   Number = 
   0 
   // 后台返回的总页数 
  
 
   searchIndex = 
   0; 
   //当前选中的TAB下标 
  
 
   enumeration: 
   object = {} 
  
 
   applyTotal: 
   Number = 
   0 
   // 总条数 
  

这个没啥好说的，看代码就行了

4、prop

这个也没啥好说的：

    @ 
   Prop() 
  
   isShow: 
   false 
  
    @ 
   Prop() 
  
   qrcodeMsg: 
   object 
  
    @ 
   Prop() 
  
   codeUrl: 
   string

5、VUEX的使用

 
  import { 
  mapMutations } 
  from 
  'vuex' 
 

    @ 
   Component({ 
  
   components: { 
  
   fileInput 
  
    }, 
  
    ... 
   mapMutations([ //vuex的dispatch 
  
   'SET_TITLE_NAME' 
  
    ]) 
  
    })

改变值的时候直接调用dispatch

 
  this. 
  $store. 
  commit( 
  'SET_TITLE_NAME', 
  '申请管理'); 
 

6、使用mixins

mixins里面需要在component里面注入：

 
  import 
  FormValidateMixin 
  from 
  '../../mixins/mixin' 
 

   @ 
  Component({ 
 

 
   components: { 
  
   fileInput 
  
    }, 
  
   mixins: [ 
   FormValidateMixin] 
  
    })

mixin.ts:

 
   import { 
   Vue, 
   Component } 
   from 
   'vue-property-decorator' 
  
   declare 
   module 
   'vue/types/vue' { 
  
   interface 
   Vue { 
  
   form: 
   Object 
  
   handleSubmit ( 
   name: 
   any): 
   Promise< 
   any> 
  
   handleReset ( 
   name: 
   any): 
   void 
  
    } 
  
    } 
  
   /** 
  
    * mixins 
  
    */ 
  
    @ 
   Component 
  
   export 
   default 
   class 
   FormValidateMixin 
   extends 
   Vue { 
  
   form: 
   Object = {} 
  
   handleSubmit ( 
   name: 
   any): 
   Promise< 
   any> { 
  
   return 
   new 
   Promise(( 
   resolve) 
   => { 
  
   resolve() 
  
    }) 
  
    } 
  
   handleReset ( 
   name: 
   any): 
   void { 
  
   window. 
   alert( 
   ` 
   ${ 
   name 
   } 
   `) 
  
    } 
  
    }

其实上面这些基本上包含了所有在vue+ts中遇到的情况，其他的像过滤器、指令正常在main.ts里面写就行了，除了mixin那块其他的代码都在我文章前面说的那个git上，如果mixin那块有遇到问题的话可以给我留言。

说实话，在vue+ts网上这块没有一篇文章讲得很彻底的，我这篇文章里面包含的我感觉还是很全面的，希望能帮到大家。

vue TS使用props,vuex,mixins详解

猜你喜欢