Vue3教程：英雄指南（三）

前言

最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8

之前的内容请看：
Vue3 教程：英雄指南（一）
Vue3 教程：英雄指南（二）

组合式API

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

这句话是Angular英雄指南教程第四章的一句话，然而我翻遍了Vue3的教程，觉得应该组合式API是能最好实现这句话的特性。

获取英雄数据

在之前的教程中我们将英雄列表的逻辑都写在了setup组件选项中，这章我们将把setup中数据访问逻辑抽离到单独的文件中。

从组件中移除数据访问逻辑，意味着将来任何时候你都可以改变目前的实现方式，而不用改动任何组件。 这些组件不需要了解该服务的内部实现。

在src文件夹下新建一个文件夹，将它重命名为composables，之后在改文件下新建一个js文件，重命名为fetchHeroes.js。

编辑fetchHeroes.js，导入HEROES，这是我们的数据来源：

// src\composables\fetchHeroes.js

import {
    HEROES } from "../mock-heroes";

新增一个方法fetchHeroes作为默认导出方法，Heroes组件将在setup组件选项中用到这个方法，将Heroes组件中数据访问逻辑复制到fetchHeroes.js中

// src\composables\fetchHeroes.js

export default function fetchHeroes() {
   
  let heroes = HEROES;

  return {
   
    heroes,
  };
}

修改Heroes组件

导入fetchHeroes

// src\components\Heroes.vue

import fetchHeroes from "/src/composables/fetchHeroes.js"

修改setup组件选项

export default {
   
  name: "Heroes",
  components: {
    HeroDetail, Messages },
  setup() {
   
  	// let heroes = HEROES; // 删去这行
    let {
    heroes } = fetchHeroes();
    
    let selectedHero = reactive({
   });
    function onSelect(hero) {
   
      Object.assign(selectedHero, hero);
    }
    let heroCap = computed(() => {
   
      return (
        selectedHero.name &&
        selectedHero.name.