vue3全局变量的问题

cqwcns

情况是这样的，我想开发一个web app，环境是vue3（vite）。
然后我需要使用腾讯云开发做后端，为了访问云端资源，云开发的sdk调用大概是这样的：

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

import cloudbase from "@cloudbase/js-sdk";

const cloudbaseApp = cloudbase.init({
    env: '你的环境ID'
});

cloudbaseApp.auth().anonymousAuthProvider().signIn().then(() => {
    console.log('匿名登录成功')
    callFunction()
});

async function callFunction() {
    let res = await cloudbaseApp.callFunction({
        name: 'webCloud',
        date: {}
    })
    console.log(res)
}

调用实际上就是cloudbaseApp.callFunction这个。
我的问题是希望在main.js中一次引入sdk，并完成登录，再将cloudbaseApp对象挂载全局，然后其他页面直接调用cloudbaseApp即可。


这种需求应该怎么操作，请各位大佬指教。谢谢。

kof21411

vue3 挂载全局 比较麻烦，建议把sdk封装到一个js文件里调用比较方便

linguo2625469

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

const app = createApp(App);
app.config.globalProperties.$xxxx = cloudbaseApp ;

页面中this.$xxxx即可
其中app为你main.js中自己定义的 如果不一样就替换
xxxx自己起名

参考自：应用实例 API | Vue.js

badyun

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

//在main.js中创建实例
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
//挂载方法到实例上
app.config.globalProperties.$axios = axios

//全局调用
import { getCurrentInstance } from "vue";
const { proxy }: any = getCurrentInstance();
proxy.$axios()

cqwcns

linguo2625469 发表于 2023-1-3 11:22
[mw_shl_code=javascript,true]const app = createApp(App);
app.config.globalProperties.$xxxx = cloudb ...

你好，报错：TypeError: Cannot read properties of undefined (reading '$myMsg')
是什么原因，请指教，感谢。

cqwcns

测试了一下，好像只能使用这种方法：
import { getCurrentInstance } from "vue";
const { proxy }: any = getCurrentInstance();
proxy.$axios()

直接使用this无法调用，不知道什么原因？

wulincheng

你可以直接导出去挂载全局啊

tobtoo

埋个眼，后面也有需求要vue3 还不太熟悉等后续   

Alex.Merceryj

可以采用依赖注入

• (使用)[https://blog.csdn.net/qq_32805013/article/details/123371061]
• (官网介绍)[https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject]

  
  //main.js 注册
  import * as alexUtils from '@/utils/alex'
  app.provide('alexUtils', alexUtils)

//页面使用
const alexUtils = inject('alexUtils')

FIzz001

不是可以直接导出去挂载全局？