vue3全局变量定义使用

当自己尝试用vue3开发项目时候遇到需要全局变量使用时候怎么办？vue2处理很简单在原型链上使用挂载
api.js

import http from './http'//拦截器
const api = {async getUserInfo(params){return await http.post('/getUserInfo',{...param})}
}
export const ApiPlugin = {install(Vue){Vue.prototype.$http = api}
}

main.js

import Vue from 'vue'
import {ApiPlugin} from '@/api'
Vue.use(ApiPlugin)

但是到了vue3无法直接在原型链上直接挂载自定义属性
百度有很多推荐main.js中：通过app.config.globalProperties将组件或者方法、变量挂载在全局，这种方法个人很用不惯，在未读源码时候不知道这个globalProperties会有啥问题。
这里就是用一个vue2也有的方法provide/inject,vue3也一样可以使用。
使用方法就是在通过provide/inject发放到全局都使用这个变量。
还是一样先定义接口文件
api.js

import http from "./http";export const api = {async getUserInfo(){return await http.get('/userInfo')}
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { api } from "@/api/index";
onst app = createApp(App)
app.use(store).use(router).mount('#app')
app.provide('api', api);//全局发送api

任何一个子组件
child.js

<script>
import { useStore } from "vuex";
import { inject, onBeforeMount, ref } from "vue";
export default {name: 'Child',setup(props) {const $http = inject('api')onBeforeMount(async() => {const res = await $http.getUserInfo()console.log(res);//...其余操作})},
}
</script>

vue3全局变量定义使用相关推荐

vue3全局变量定义及使用
定义全局变量 const app = createApp({}) app.config.globalProperties.$http = () => {} 全局变量使用 const { prox ...
python全局变量定义_Python 3 实现定义跨模块的全局变量和使用
尽管某些书籍上总是说避免使用全局变量,但是在实际的需求不断变化中,往往定义一个全局变量是最可靠的方法,但是又必须要避免变量名覆盖. Python 中 global 关键字可以定义一个变量为全局变量,但 ...
vue3之定义数据(Ref全家桶)
目录 vue3之定义数据只是用于展示的数据(非响应式数据) 响应式数据 (Ref全家桶) 定义简单数据类型判断是否为 ref对象(定义为响应式数据对象) shallowRef 定义简单数据类型的响 ...
C语言全局变量定义方法
C语言全局变量定义方法今天调试系统的时候,需要定义几个全局位变量,定义好后一编译,发现错误一大堆,错误基本都是位变量定义时产生的.以前也定义过全局变量啊,但是先前怎么没错误?瞎折腾了一会最后还是发现 ...
thymeleaf全局变量定义
thymeleaf全局变量定义 1. 重写configureViewResolvers方法 /*** @author : fzz*/ @Component public class WebMvcCon ...
一、初识kotlin之全局变量定义(kotlin学习笔记)
文章目录语法区别全局变量定义区别语法区别 kotlin与java在定义参数上的区别,如下全局变量的定义,请通过名称对应,同一个名称在kotlin中出现多次表示这个变量有多种定义方式全局变量定义 ...
vue3 如何定义全局变量
在vue2中,我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量,然后通过this.$xxx来获取全局变量. 但是在vue3中,这种方法显然不行了.因为vue3中在 ...
全局变量定义的时候左侧加了static_c语言中static 用法
static在c里面可以用来修饰变量,也可以用来修饰函数. 先看用来修饰变量的时候.变量在c里面可分为存在全局数据区.栈和堆里.其实我们平时所说的堆栈是栈而不是堆,不要弄混. int a ; int ...
C语言中的全局变量定义与使用
1. 书中对'全局变量'的定义在函数内定义的变量是局部变量,而在函数外定义的变量叫做外部变量,外部变量是全局变量.全局变量可以为本文件中其他函数所共用它的有效范围从定义变量的位置开始到本源文件结束 ...

vue3全局变量定义使用

vue3全局变量定义使用相关推荐

最新文章

热门文章