10. Vue3中模块化深入-实现随机出现美女服务员

这时候“北海九号”餐厅的老板有了新的项目，要求来的顾客可以随机选择一位美女服务员，增加刺激性，我们的任务也是作一个随机选择的菜单，每次刷新都会随机出现小红、小李或者是小张。趁这个机会，我们正好也练习一下 Vue3.x 中的模块化。

编写远程调用 API 组件

这里我们使用 axios 来进行远程随机获得图片，但是我们这里作的不是远程随机获得图片，而是模块化一个通用的远程调用 API 的组件，这个组件可以远程请求一个指定的 URL，并且返回所得到的值。 先用npm的方式安装axios。

npm install axios --save

在 P09 节我们在 src 下新建了一个 hooks 文件夹，在里面我们新建一个文件，叫做useURLAxios.ts,然后先引入ref和axios.在文件里写一个useUrlAxios方法，在方法里声明四个响应式变量result、loading、loaded和error。声明好后，使用axios进行访问远程链接。最后记得要进行return和export default。

import { ref } from 'vue'
import axios from 'axios'

function useUrlAxios(url: string) {
    const result = ref(null)
    const loading = ref(true)
    const loaded = ref(false)
    const error = ref(null)

    axios.get(url).then((res) => {
        loading.value = false
        loaded.value = true
        result.value = res.data
    }).catch(e => {

        error.value = e
        loading.value = false
    })
    return {
        result,
        loading,
        loaded,
        error
    }
}

export default useUrlAxios

随机美女 API 介绍

这个随机美女的 API，下去大家在 mock 模拟数据平台做过一个就可以，不用传任何参数，只要进行 get 请求就可以得到随机出现小红、小李和小张的图片的地址即可。

App.vue 的实现

我们先来实现进入页面随机显示一个美女图片，然后刷新会出现不同的美女。

<template>
  <div>
    <h2>欢迎光北海九号主题餐厅</h2>
     <div>随机选择一位美女服务员</div>
    <div v-if="loading">Loading.....</div>
    <img v-if="loaded" :src="result.imgUrl" />
    <div></div>
  </div>
</template>
<script lang="ts">
import { ref } from "vue";
import useUrlAxios from "../src/hooks/useUrlAxios";
const app = {
  name: "App",
  setup() {
    const { result, loading, loaded } = useUrlAxios(
      "https://dog.ceo/api/breeds/image/random"
    );

    return { result, loading, loaded };
  },
};
export default app;
</script>

好了，我们只要刷新，都可以随机显示一张美女服务员的照片。但这不是重点，重点是我们要学会这种独立模块化的方式，让我们的代码可以复用。建议这个代码要多写两边，养成这种模块化的思维方式。

以上关于10. Vue3中模块化深入-实现随机出现美女服务员的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。