《Vue组件的mixins选项的TS写法》

当多个组件的选项有重复时，可以使用mixins选项，把重复的放到混入对象里。

那么TS写法的mixins的语法是什么样的呢？

混入对象的声明

作为对比，在JS里可以直接在创建的文件里导出一个对象，对象里就是组件们都要用到的选项。

在TS里，比如我们在/mixins/tagHelper.ts文件里声明：

import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare mixins as the same style as components.
@Component
export class tagHelper extends Vue {
    createTag(){
        const name=window.prompt("请输入标签名")
        if(!name){
            window.alert('标签名不能为空')
        }else{
            this.$store.commit('createTag',name)
        }
    }
}

在Vue组件里使用

<script lang="ts">
    import {Component} from 'vue-property-decorator';
    import {tagHelper} from '@/mixins/tagHelper';
    import {mixins} from 'vue-class-component';

    @Component({
        components: {Button},
        computed:{
            tags(){
                return this.$store.state.tagList
            }
        }
    })
    
    export default class Labels extends mixins(tagHelper) {
       
    }
</script>

1. 原来extends Vue。 使用mixins就需要extends mixins(tagHelper)，括号里边的是定义的文件名。
2. 导入mixins,导入声明了混入对象的文件

然后在组件里就可以使用createTag方法了。这是js里的methods里的方法。ts里可以不用写methods。

ts里，计算属性是写到@Compontent里