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

cqwcns 发表于 2023-1-16 10:59

首先我在main.js中这样定义了一个全局变量。
const cloudbaseApp = cloudbase.init({ env: 'my-env' });
await cloudbaseApp.auth().anonymousAuthProvider().signIn().then(() => {
console.log('成功连接云端')
});
app.provide('global', { cloudbase: cloudbaseApp });

然后我在*.vue中可以这样成功调用这个变量。
import { inject } from 'vue';
const global = inject('global'), { cloudbase } = global;

但我的问题是需要在JS文件中调用。
结构大概是这样的，我在*.vue中调用一个JS：
import { uploadImageAdapter } from "../assets/js/uploadImageAdapter";

但我的问题是需要在JS文件中调用。
JS文件大概是这样的：
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 发表于 2023-1-16 11:25

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

steven026 发表于 2023-1-16 12:37

挂到window上
window.cloudbase=cloudbase

ytfrdfiw 发表于 2023-1-16 13:12

感谢分享。

伊人浅笑醉长安 发表于 2023-1-16 13:58

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

cqwcns 发表于 2023-1-16 14:31

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

我是vue3

伊人浅笑醉长安 发表于 2023-1-16 14:45

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 发表于 2023-1-16 15:32

我的理解是inject函数是通过组件实例一层层往上找上一级组件实例的provide数据，你这样的写法inject执行的时候不处于vue的上下文，你可以尝试下把初始化写在类的构造函数里
class uploadImageAdapter {
constructor(loader) {
this.loader = loader;
this.cloudbase = inject('global').cloudbase
}
}
这样在.vue文件中使用应该就没问题

cqwcns 发表于 2023-1-16 15:44

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

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 发表于 2023-1-16 15:44

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

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

:'(weeqw

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

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