uni-app中利用App.Vue定制全局变量、全局函数

条件： vue setup 

在uni-app项目中，App.vue与其它页面等同于父组件与子组件的关系。

所以我们可以利用这点，采用provide的依赖注入方式，实现全局变量或全局函数。

 

 一、定义APP的全局变量pageTitle，并提供修改它的方法：

定义全局变量及函数（App.vue）

// 定义全局变量
var pageTitle = ref('这是默认的站点标题')

// 获取全局变量值
provide('pageTitle', readonly(pageTitle))

// 修改全局变量方法
provide('setPageTitle', val => {
    pageTitle.value = val
})

 

页面中取值与修改值

<template>
    <view>{{pageTitle}}</view>
    <button @tap="modifyTitle()">点击修改标题</button>
</template>

<script setup>
    import {
        ref,
        inject
    } from 'vue'

    // 注意，inject必需放置在setup内
    const pageTitle = inject('pageTitle') // 取值。这里pageTitle与全局变量不冲突
    var setPageTitle = inject('setPageTitle') // 赋值方法

    function modifyTitle(){
        // var setPageTitle = inject('setPageTitle') 错误写法，因为inject只能放在setup内定义
        setPageTitle('这是新标题')
    }
</script>