基础教程

简介

本教程介绍最基础的两个 api，通过这两个 api 来大概认识一下怎么使用本库。

• Injectable
• useService

使用步骤

定义服务

import { Injectable } from "@kaokei/use-vue-service";

@Injectable()
export class LoggerService {
  public log(...msg: any[]) {
    console.log("from logger service ==>", ...msg);
  }
}

@Injectable()
export class CountService {
  public count = 0;
  constructor(private logger: LoggerService) {}

  public addOne() {
    this.count++;
    this.logger.log("addOne ==> ", this.count);
  }
}

从上面的代码可以看出来，我们采用类来描述服务。这里的服务就是 typescript 中普通的类，并没有引入新的概念。 所以是非常简单易上手的，只要记住使用@Injectable标记该类是可注入的服务即可。

注意到上面 LoggerService 是没有依赖的，但是 CountService 是依赖 LoggerService 的。因为 LoggerService 出现在 CountService 的构造函数中。最终 CountService 就会有一个 logger 实例属性，且 logger 的类型就是 LoggerService。

使用服务

<template>
  <div>
    <span>{{ countService.count }}</span>
    <button type="button" @click="countService.addOne()">+1</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { useService } from "@kaokei/use-vue-service";
import { CountService } from "../services/count.service";

export default defineComponent({
  setup() {
    // 返回的就是CountService类的实例
    // 并且是reactive的
    const countService = useService(CountService);
    return {
      // 可以在模板中直接绑定数据和事件
      countService,
    };
  },
});
</script>

注意这里是一个 vue 组件的源代码，我们使用 defineComponent 定义组件。很明显最关键的一行代码就是const countService = useService(CountService);。本库提供了一个方法useService，该方法从名字可以看出来是一个 hooks 方法，只能在setup函数中使用。

在这个例子中，我们传入参数CountService，返回一个对象countService，注意 countService 的类型就是 CountService，也就是说 countService 是 CountService 类的一个实例。

正如上面代码中的注释所说，countService 对象本身是一个 reactive 对象，所以 vue 模版可以直接渲染 countService.count，当 countService.count 变化时，组件也会自动更新。

到这里为止，聪明的你一定已经发现了很多问题。

• 为什么我们不自己 new CountService()，而要通过 useService 获取实例对象？
• useService(CountService) 这里并没有传递 LoggerService，那么这里是如何初始化 LoggerService 的？
• 在不同的组件中调用 useService(CountService)，获取到的实例是不是同一个对象？

这些问题的解答可以参考这里