前言
最近在看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.