vue3项目中，js文件访问全局变量的问题。

cqwcns 发表于 2023-1-27 21:15

在main.js中，定义了一个全局方法cloudbase；
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import cloudbase from "@cloudbase/js-sdk"
import App from './App.vue'
import router from './router'

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

app.use(createPinia());
app.use(router);
app.mount('#app')

经过测试，在vue文件中，通过以下方式，能成功调用该方法。
import { inject } from 'vue';
const global = inject('global'), { cloudbase } = global;

问题：
但我现在希望在js文件中调用，再由vue文件去调用js文件，实现方法在全部vue文件复用。我做了如下尝试：
首先在vue文件中这样引入js文件：
import { cloudbaseFunction } from '@/assets/js/cloudbase';
...
// 调用
const objLogin = await cloudbaseFunction({
target: 'staff/login',
data: {
   phoneNumber: strPhone.value,
   password: md5(srtPassword.value)
}
})

cloudbase.js文件这样写：
import { inject } from 'vue';
const global = inject('global'), { cloudbase } = global;

export const cloudbaseFunction = async (e) => {
const { target, data } = e;
return await cloudbase.callFunction({
   name: 'webCloud',
   data: {
         target,
         data
   }
})
}

但报错：Uncaught (in promise) TypeError: Cannot destructure property 'cloudbase' of 'global' as it is undefined.

所以，这种场景，各位大佬是否有解决办法？或者有什么建议？请指教，感谢。

spiral 发表于 2023-1-27 21:20

这不是应该发在so么{:1_909:}

pjy612 发表于 2023-1-28 08:58

{ cloudbase } = global;
这个为啥不放到函数体里面去？

水到渠成的执着 发表于 2023-1-30 11:20

把cloudbase 的初始化操作也放在cloudbase.js文件呢全局的定义有些没必要了

cqwcns 发表于 2023-2-3 11:15

水到渠成的执着发表于 2023-1-30 11:20
把cloudbase 的初始化操作也放在cloudbase.js文件呢全局的定义有些没必要了

这样是不是每次调用都要进行cloudbase的初始化？保持不了状态吧。

水到渠成的执着 发表于 2023-2-6 14:38

水到渠成的执着发表于 2023-1-30 11:20
把cloudbase 的初始化操作也放在cloudbase.js文件呢全局的定义有些没必要了

是调用上次引用的缓存所以不用担心只会初始化一次

页: [1]

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

vue3项目中，js文件访问全局变量的问题。