1 各自官方给的写法

下面是各自官方给的写法介绍,有兴趣的可以看一下：

Nuxt官方介绍的typeScript的写法
Vue官方介绍的typeScript的写法
vuex官方介绍的typeScript的写法

2 class模式写vue组件

目前 vue2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class 的组件书写方式
vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：
官方文档：https://class-component.vuejs.org/

methods，钩子都可以直接写作class的方法
computed属性可以直接通过get来获得
初始化data可以声明为class的属性
其他的都可以放到Component装饰器里

为了支持vue-class-component的typeScript的写法，推荐使用vue-class-component
github地址：vue-class-component

下面是使用demo：

// 需要用到哪些方法需要引入
import {
    
     Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";
// 路由拦截(registerHooks)
Component.registerHooks([ "beforeRouteEnter" 'beforeRouteLeave', 'beforeRouteUpdate' ]);
@Component({
    
    
    // mixins两种用法下面专门讲
    mixins: [],
    // props传值(方法一)
    props: {
    
    
        firstName: String,
        lastName: String
    },
    // 注册组件
    components: {
    
    
        'component-a': ComponentA
    }
})
export default class about extends Vue {
    
    
  // props传值(方法二)
  @Prop() propA:string
  @Prop() propB:number
  @Prop({
    
     default: "123" }) private propB3: string;
  private name: string = "liu";
  private num: number = 1;

  // 直接写方法，不需要放在methods
  clickFunc() {
    
    
    console.log("点击", this.name, this.num);
  }

  // 监听
  @Watch("num", {
    
     immediate: true })
  watchNum(newVal: number) {
    
    
    console.log(newVal);
  }

  //computed 属性
  get comput1() {
    
    
    return "computed " + this.num;
  }

  created(){
    
    
    console.log('created')
  }

  // 路由拦截
  beforeRouteLeave(to, from, next) {
    
    
       console.log(to, from)
       next();
  },
}

3 以类样式的方式使用mixins

官方关于mixins的介绍

3.1 声明mixin的示例：

// mixin1.js
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
    
    
  mixinValue = 'Hello'
}

3.2 使用mixin的示例1：

import Component, {
    
     mixins } from 'vue-class-component'
import MyMixin1 from './mixin1.js'
import MyMixin2 from './mixin2.js'

// Use `mixins` helper function instead of `Vue`.
// `mixins` can receive any number of arguments.
@Component
export class MyComp extends mixins(MyMixin1, MyMixin2) {
    
    
  created () {
    
    
    console.log(this.mixinValue) // -> Hello
  }
}

3.3 使用mixin的示例2：

import MyMixin1 from './mixin1.js'
import MyMixin2 from './mixin2.js'
@Component({
    
    
  components: {
    
    },
  mixins: [MyMixin1, MyMixin2 ]
})
export class MyComp extends Vue {
    
    
  created () {
    
    
    console.log(this.mixinValue) // -> Hello
  }
}

4 vuex

4.1 store文件中vuex的modules写法

如nuxtjs官方文档所说，Nuxt.js 支持两种使用 store 的方式，你可以择一使用：

模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块（当然，index 是根模块）
Classic(不建议使用)： store/index.js返回创建Vuex.Store实例的方法。
结合ts当然是使用 vuex-module-decorators来创建modules。

store/myModule.ts中：

import {
    
     Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({
    
    
  name: 'myModule',
  stateFactory: true,
  namespaced: true,
})
export default class MyModule extends VuexModule {
    
    
  wheels = 2

  @Mutation
  incrWheels(extra) {
    
    
    this.wheels += extra
  }

  get axles() {
    
    
    return this.wheels / 2
  }
}

utils/store-accessor.ts中：

import {
    
     Store } from 'vuex'
import {
    
     getModule } from 'vuex-module-decorators'
import MyModule from '~/store/myModule'

let myModule: MyModule

function initialiseStores(store: Store<any>): void {
    
    
  myModule = getModule(MyModule, store)
}

export {
    
     initialiseStores, myModule }

store/index.ts中：

import {
    
     Store } from 'vuex'
import {
    
     initialiseStores } from '~/utils/store-accessor'

const initializer = (store: Store<any>) => initialiseStores(store)

export const plugins = [initializer]
export * from '~/utils/store-accessor'

4.2 vue文件中vuex的class写法

安装：

npm i vuex-class

原用法：如名为user的module模块

    this.$store.state.user.token
    this.$store.getters['user/getToken']
    this.$store.commit('user/setToken','commit')
    this.$store.dispatch('user/updateToken','dispatch')

vuex-class用法

import {
    
     State, Mutation, Action } from "vuex-class";   
@State("token") stateToken;
@Mutation("setToken") MutationToken;
@Action("updateToken") ActionToken;

this.stateToken
this.MutationToken("MutationToken")
this.ActionToken('ActionToken')

vuex-class module时用法，列如user和person的module

import {
    
     namespace } from 'vuex-class';
const user = namespace('user');
const person = namespace('person');

export default class vuexModules extends Vue {
    
    
  @person.State(state => state.name) stateName: string;
  @user.State((state) => state.token) stateToken;
  @user.Getter('getToken') GetterToken;
  @user.Mutation("changeToken") MutationToken;
  @user.Action("updateToken") ActionToken;
  created() {
    
    
    console.log(this.stateName)
    console.log(this.stateToken)
    this.GetterToken
    this.MutationToken('MutationToken')
    this.ActionToken('ActionToken')
  }
}

vue和Nuxt中typeScript的写法