VUE3，JS文件访问全局变量的问题

cqwcns

首先我在main.js中这样定义了一个全局变量。

[JavaScript] 纯文本查看 复制代码

const cloudbaseApp = cloudbase.init({ env: 'my-env' });
await cloudbaseApp.auth().anonymousAuthProvider().signIn().then(() => {
    console.log('成功连接云端')
});
app.provide('global', { cloudbase: cloudbaseApp });

然后我在*.vue中可以这样成功调用这个变量。

[JavaScript] 纯文本查看 复制代码

import { inject } from 'vue';
const global = inject('global'), { cloudbase } = global;

但我的问题是需要在JS文件中调用。
结构大概是这样的，我在*.vue中调用一个JS：

[JavaScript] 纯文本查看 复制代码

import { uploadImageAdapter } from "../assets/js/uploadImageAdapter";

但我的问题是需要在JS文件中调用。
JS文件大概是这样的：

[JavaScript] 纯文本查看 复制代码

import { inject } from 'vue';
const global = inject('global'), { cloudbase } = global;

class uploadImageAdapter {
    constructor(loader) {
        this.loader = loader;
    }

    // 启动上传
    async upload() {
        const testToCloud = await cloudbase.callFunction({
            name: 'webCloud',
            data: {
                target: 'staff/login',
                data: {
                    phoneNumber: 'strPhone.value',
                    password: 'md5(srtPassword.value)'
                }
            }
        })
        console.log('testToCloud', testToCloud);
        return { default: testToCloud };
    }

    // 中止上载
    abort() {
        console.log('中止')
    }
}

export { uploadImageAdapter };

以上，我尝试用同样的方法访问全局变量，但报错TypeError: Cannot destructure property 'cloudbase' of 'global' as it is undefined.

所以，如果我要在该JS文件中调用全局的cloudbase，应该怎么写？请大佬指教，感谢。

jasonz18

原因猜测：js文件引入和provide预设没有形成父子或者子孙组件关系
全局属性可以不用provide/inject
使用 app.config.globalProperties

steven026

挂到window上
window.cloudbase=cloudbase

ytfrdfiw

感谢分享。

伊人浅笑醉长安

app.config.globalProperties
全局变量放到这个位置，虽然麻烦一点。
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。
这是对 Vue 2 中 Vue.prototype 使用方式的一种替代，此写法在 Vue 3 已经不存在了。

cqwcns

伊人浅笑醉长安 发表于 2023-1-16 13:58
app.config.globalProperties
全局变量放到这个位置，虽然麻烦一点。
一个用于注册能够被应用内所有组件 ...

我是vue3

伊人浅笑醉长安

cqwcns 发表于 2023-1-16 14:31
我是vue3

vue2 用  Vue.prototype
vue3 用  app.config.globalProperties
https://cn.vuejs.org/api/application.html#app-config-globalproperties

npc404

我的理解是inject函数是通过组件实例一层层往上找上一级组件实例的provide数据，你这样的写法inject执行的时候不处于vue的上下文，你可以尝试下把初始化写在类的构造函数里

[JavaScript] 纯文本查看 复制代码

class uploadImageAdapter {
    constructor(loader) {
        this.loader = loader;
        this.cloudbase = inject('global').cloudbase
    }
}

这样在.vue文件中使用应该就没问题

cqwcns

收到一个警告，一个错误。
[Vue warn]: inject() can only be used inside setup() or functional components.
Uncaught TypeError: Cannot read properties of undefined (reading 'cloudbase')

[JavaScript] 纯文本查看 复制代码

import { inject } from 'vue';

class uploadImageAdapter {
    constructor(loader, cloudbase) {
        this.loader = loader;
        this.cloudbase = inject('global').cloudbase;
    }
 
    // 启动上传
    async upload() {
        const testToCloud = await cloudbase.callFunction({
            name: 'webCloud',
            data: {
                target: 'staff/login',
                data: {
                    phoneNumber: 'strPhone.value',
                    password: 'md5(srtPassword.value)'
                }
            }
        })
        console.log('testToCloud', testToCloud);
        return { default: testToCloud };
    }
 
    // 中止上载
    abort() {
        console.log('中止')
    }
}
 
export { uploadImageAdapter };

cqwcns

npc404 发表于 2023-1-16 15:32
我的理解是inject函数是通过组件实例一层层往上找上一级组件实例的provide数据，你这样的写法inject执行的 ...

收到一个警告，一个错误。
[Vue warn]: inject() can only be used inside setup() or functional components.
Uncaught TypeError: Cannot read properties of undefined (reading 'cloudbase')