网站 › 『编程语言讨论求助区』 › vue3全局变量的问题

cqwcns 发表于 2023-1-3 11:03

vue3全局变量的问题

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

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 发表于 2023-1-3 11:19

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

linguo2625469 发表于 2023-1-3 11:22

本帖最后由 linguo2625469 于 2023-1-3 11:24 编辑

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

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

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

badyun 发表于 2023-1-3 11:34

//在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 发表于 2023-1-3 12:01

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

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

cqwcns 发表于 2023-1-3 12:09

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

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

wulincheng 发表于 2023-1-3 12:20

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

tobtoo 发表于 2023-1-3 12:24

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

Alex.Merceryj 发表于 2023-1-3 14:06

# 可以采用依赖注入
>- (使用)
>- (官网介绍)
```js
//main.js 注册
import * as alexUtils from '@/utils/alex'
app.provide('alexUtils', alexUtils)

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

FIzz001 发表于 2023-1-3 15:13

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

查看完整版本: vue3全局变量的问题