Nuxt + Typescript最佳实践2：使用ClassAPI语法

TypeScript的优势就是类型检查和良好的代码提示，使用TypeScript编程主要是利用这一点，vue提供了基于TypeScript的ClassAPI语法，一起来看看。

改写.vue文件

为了支持TypeScript ClassAPI风格写法，我们需要引入

vue-property-decorator
安装

yarn add vue-property-decorator

一个典型的vue文件写法是：

<template>
    <div>
        welcome to kruz's blog
    </div>
</template>
<script>
export default {
    name: 'Hello',
    data () {
      return {
        msg: '欢迎！'
      }
  }
}
</script>

如果要改写成ClassAPI风格写法就是

<template>
    <div>
        welcome to kruz's blog
    </div>
</template>
<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component()
    export default class Hello extends Vue {
        msg='欢迎！';
        mounted() {
        }
    }
}
</script>

这其中只有<script>里面写法的变化,而且标签必须写成 <script lang="ts"></script>

Class API风格介绍

vue 组件现在有几种风格的写法

默认写法，也就是基于ES6单文件写法。
Composition API风格写法，vue3新加入的。
Class API风格写法，TypeScript独有。

当然TypeScript都支持这三种，这里只介绍Class API风格写法。这种写法比较贴近TypeScript的语法特征，能最大化利用TypeScript的语言优势，包括类，装饰器，Inject/Eject， getter/setter的理念。

下面是一个例子

<template>
    <div>
        {{msg }}
      <button @click="clickOnButton"></button>
      <my-image/>
    </div>
</template>
<script lang="ts">
   import {Component, Vue， Prop， Watch} from 'vue-property-decorator';
   import MyImage from '@/components/MyImage .vue';

    @Component({
        components: {MyImage },
        mixins: []
    })
    export default class Hello extends Vue {
       // 等同于props
       @Prop({type: String, default: '', required: false})
        private accept?: string;


        // 绑定一个变量，可以在template里面使用
        msg = '欢迎，欢迎！';
        tick=1；        



        // 使用get属性, 等同于compute 
       get count(){
           return 1;
       }
        
       // mounted生命周期函数
        mounted() {
        }

         // 监听数据发生了改变，等同于watch
        @Watch(‘tick’)
        onTickChange(val: number){
            console.log('tick发生了变化'):
        }
      
       // 事件响应函数
       clickOnButton(){
          console.log('点击了按钮'):
       }

       // beforeDestroy生命周期函数
       beforeDestroy() {
       }
    }
</script>

以上是最简单的写法，更多写法可以参考 https://github.com/kaorun343/vue-property-decorator#readme

如何使用SSR独有的API

nuxt给vue页面添加了独有api，诸如asycData, fetch , middleware, 官方只给了普通模式的写法，没有给出ClassAPI风格写法，那么该怎么写？

答案：直接写在 @Component里面即可。

import {Component, Prop, Vue} from 'vue-property-decorator';
@Component({
    // 写在这里
    middleware: 'auth',   // 中间件
    key: '',
    layout: '',
    components: {},
    head() {
        //使用 head 方法设置当前页面的头部标签。
       return {
          title: this.title,
          meta: [
            { hid: 'description', name: 'description', content: 'My custom description' }
          ]
        }
    }
    async asyncData() {
        return {};
    }
}
export default class extends Vue {
     // 省略
}

具体API请参考：api

nuxt提供的函数调用时不在vue组件的生命周期里面，我们没法使用组件this对象，不过nuxt给我们提供了app上下文对象，具体参考：context

 async asyncData(app) {
       // app 包含了很多对象信息
        return {};
 }

其他的.ts文件改写

在我们的项目里除了server/index.js 和 nuxt.config.js 我们都可以改写成ts文件，这样可以统一管理.
比如官方提供的middleware中间件改写方案:

import { Middleware } from '@nuxt/types'

const myMiddleware: Middleware = (context) => {
  // 使用 context
}

export default myMiddleware

最后编辑于：2020.05.11 18:12:01