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

cqwcns

在main.js中，定义了一个全局方法cloudbase；

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

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文件中，通过以下方式，能成功调用该方法。

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

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

问题：
但我现在希望在js文件中调用，再由vue文件去调用js文件，实现方法在全部vue文件复用。我做了如下尝试：
首先在vue文件中这样引入js文件：

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

import { cloudbaseFunction } from '@/assets/js/cloudbase';
...
// 调用
  const objLogin = await cloudbaseFunction({
    target: 'staff/login',
    data: {
      phoneNumber: strPhone.value,
      password: md5(srtPassword.value)
    }
  })

cloudbase.js文件这样写：

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

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

这不是应该发在so么

pjy612

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

水到渠成的执着

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

cqwcns

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

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

水到渠成的执着

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

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