uni-app开发极简入门（4）：provide/inject

之前讲Vue的时候，讲过provide/inject：

provide 和 inject 一般成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

因此，大家想一下，如果我们在App.vue这个根组件上使用provide，提供了变量或者方法，那么其他组件——作为App的后代组件——完全可以通过inject获取得到，这也相当于全局变量了。

而为了能在App.vue上使用provide，原本uni-app创建工程时生成的选项式API的写法就要修改了，这个在前文《uni-app开发极简入门（3）：全局变量之globalData》已经改过了，目前我们再添加点东西：

App.vue：

<script lang='ts' setup name='App'>
    import {
        onLaunch,
        onShow,
        onHide
    } from '@dcloudio/uni-app'

    import { provide,ref } from 'vue'

    // 定义全局数据，替代选项式API中的 globalData
    // 使用 defineOptions 宏定义 globalData
    defineOptions({
        globalData: {
            globalAppName: "uni-app测试客户端 (Vue3组合式API)"
        }
    })

    // 应用初始化完成时触发，全局只触发一次
    onLaunch(() => {
        console.log('App Launch - Composition API')
    })

    // 应用启动，或从后台进入前台时触发
    onShow(() => {
        console.log('App Show - Composition API')
    })

    // 应用从前台进入后台时触发
    onHide(() => {
        console.log('App Hide - Composition API')
    })

    // 根组件的provide
    function generateUUID() {
        let d = new Date().getTime();
        const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            const r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }
    provide('genUUID',generateUUID)

    const country=ref('China')
    provide('country',country)
</script>

<style>
    /*每个页面公共css */
</style>

上面定义globalData的写法，不影响之前globalData的使用。

在App.vue上我们提供了一个生成UUID的方法genUUID()，一个响应式变量country。

子组件的使用方法，
pages/provideDemo/provideDemo.vue：

<template>
    <div class='piDemo'>
        <h1>全局变量之provide/inject</h1>
        国家：{{country}}<br/>
        UUID：{{uuid}}
    </div>
</template>

<script lang='ts' setup name='piDemo'>
    import { inject, onMounted,ref } from 'vue';
    const genUUID = inject('genUUID')
    const country = inject('country')
    const uuid=ref('-')

    onMounted(()=>{
        uuid.value=genUUID()
        console.log('组件加载：',uuid.value);
    })
</script>

<style scoped>
    .piDemo{
        background-color: goldenrod;
    }
</style>