Vue3挂载全局变量及使用办法1

最新推荐文章于 2025-09-19 14:39:29 发布
原创 最新推荐文章于 2025-09-19 14:39:29 发布 · 772 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #vue.js

这篇博客介绍了如何在Vue3中使用依赖注入来创建和使用全局变量。通过`app.provide`设置全局变量，并在组件内部用`reactive`和`inject`来响应式地访问这些变量。此外，还展示了如何挂载常规全局变量到`globalProperties`，并在组件中通过`getCurrentInstance`访问。

采用依赖注入玩VUE3全局变量

// 采用依赖注入玩VUE3全局变量
const myname = {
   
    firstname: 'xiao', lastname: 'tianya' };
const myage = 38;
app.provide('global', {
   
    myname, myage });

使用办法


                

                
                
        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Vue 3 + TypeScript 项目中全局挂载并使用工具函数

				
			

			

				

					前端-尔嵘
				

				

					03-15
					
					1106
					
				

			

		

		

			
				
在untils文件夹下新建index.ts,并导出工具函数。

			
		

	



                

            
              



	

		

			

				
					
【vue3】vue原型挂载全局变量和获取的方法

				
			

			

				

					坚信万物皆可切的切图仔
				

				

					12-27
					
					5033
					
				

			

		

		

			
				
vue2.x挂载全局是使用Vue.prototype.xxxx=xxx的形式来挂载，然后通过this.xxxx=xxx的形式来挂载，然后通过this.xxxx=xxx的形式来挂载，然后通过this.xxx来获取挂载到全局的变量或者方法
但是在vue3.x这种方法行不通了，在setup里面连this都获取不到，那么我们怎么挂载全局变量呢并使用它呢？
1. 挂载
在main.js中进行挂载
import { createApp } from 'vue'
import App from './App'

cons

			
		

	



              


  
              

                


	

		

			

				
					
vue3.0 vuex 全局变量 存储更改

				
			

			

				

					撑戌圆爱痒生
				

				

					06-30
					
					3772
					
				

			

		

		

			
				
vue3.0 vuex 全局变量 存储更改main.js准备vuex的文件使用方法(官方推荐)页面部分需要先引入vuex使用dispatch存储或改变数据index.js部分在state内写入要用的变量通过actions触发mutations的方法在mutations写方法更改state中的值
main.js
import store from './store'
.use(store)

完整如下图

准备vuex的文件
在src文件下创建一个store的文件夹内置一个index.js文件
用来存放变量方

			
		

	





	

		

			

				
					
vue3全局挂载变量或方法

				
			

			

				

					qq_45512782的博客
				

				

					06-14
					
					2906
					
				

			

		

		

			
				
vue3全局挂载变量或方法

			
		

	



		

			
		



	

		

			

				
					
vue3如何挂载全局的方法，全局函数

					
最新发布

				
			

			

				

					PrimaryColor
				

				

					09-19
					
					353
					
				

			

		

		

			
				
Vue3 推荐使用挂载全局方法，在组件中可通过this（Options API）或（Composition API）访问。

			
		

	





	

		

			

				
					
在vue里面设置全局变量或数据的方法

				
			

			

				

					11-28
				

			

		

		

			
				
实例如下：

const MyPlugin = {
 // install方法是必需的
// // 包含两个参数：Vue 构造器，一个可选的选项对象
 install(Vue, options) {
  Vue.prototype.test = "test" ;
  Vue.prototype.wechat = "my wechat!";
 }
};
export default MyPlugin
此方法可以单独起一个文件，在引入到需要的页面里面，就可以用vue实例取到相应数据，像以下use后，取数据时和取每个模块里面的data里面的数据方法是一样的

import MyPligin from

			
		

	





	

		

			

				
					
vue3中挂载全局变量

					
热门推荐

				
			

			

				

					weixin_43090018的博客
				

				

					05-24
					
					3万+
					
				

			

		

		

			
				
vue2.x挂载全局是使用Vue.prototype.$xxxx=xxx的形式来挂载，然后通过this.$xxx来获取挂载到全局的变量或者方法
在vue3.x这种方法显然是不行了，vue3中在setup里面我们都获取不到this，官方提供了另一种方法来让我们使用，
上代码
首先在main.js中写入我们需要挂载的一个变量，比如一个地址吧

main.js
import { createApp } from 'vue'
import App from './App'
import store from '@s

			
		

	





	

		

			

				
					
挂载全局变量 vue3

				
			

			

				

					YUlangML的博客
				

				

					02-25
					
					174
					
				

			

		

		

			
				
挂载全局变量

			
		

	





	

		

			

				
					
vue2 全局变量的设置方法

				
			

			

				

					08-27
				

			

		

		

			
				
Vue2 中设置全局变量有两种方法：全局变量专用模块和全局变量模块挂载到 Vue.prototype 里。  1. 全局变量专用模块  全局变量专用模块是以一个特定模块来组织管理这些全局量，需要引用的地方导入该模块便好。例如，...

			
		

	





	

		

			

				
					
详解VUE 定义全局变量的几种实现方式

				
			

			

				

					11-26
				

			

		

		

			
				
小型项目或对全局变量需求较少的场景，使用全局变量模块或挂载到`Vue.prototype`可能更为合适，它们相对简单且易于理解。而大型项目或需要复杂状态管理的场景，Vuex则提供了更强大的管理和同步机制。开发者应根据...

			
		

	





	

		

			

				
					
Vue3如何绑定全局方法和变量

				
			

			

				

					qq_54548545的博客
				

				

					06-19
					
					1943
					
				

			

		

		

			
				
Vue3如何绑定全局方法和变量

			
		

	





	

		

			

				
					
vue3全局挂载以及使用

				
			

			

				

					weixin_46029283的博客
				

				

					03-23
					
					607
					
				

			

		

		

			
				
vue3全局挂载以及使用

			
		

	





	

		

			

				
					
vue3如何使用全局变量

				
			

			

				

					leijmdas的专栏
				

				

					07-30
					
					1172
					
				

			

		

		

			
				
共享响应式数据→ 优先选；全局工具方法/常量→ 用；大型项目状态管理→ 采用 Pinia/Vuex。避免过度使用全局变量，优先考虑组件间 props/emits 或状态库，以保持代码可维护性。

			
		

	





	

		

			

				
					
基础知识系列（三）：Vue3设置全局变量和地图挂载全局

				
			

			

				

					A20231015的博客
				

				

					11-27
					
					1242
					
				

			

		

		

			
				
1.删包：git bash终端 rm -rf node_modules Linux命令。3.将OL_SDK和libs（Libraries 的缩写）文件夹放在src文件夹下。在OpenControl.vue中。在OpenControl.vue中。在main.js即入口文件中。在App.vue即组件文件中。在OpenMap.vue中。在OpenMap.vue中。

			
		

	





	

		

			

				
					
Vue3挂载全局方法及组件中如何使用

				
			

			

				

					m0_46165586的博客
				

				

					07-11
					
					1万+
					
				

			

		

		

			
				
在Vue3项目中，需要频繁使用某一个方法。配置到全局感觉会方便很多。例如：因为很多页面都需要对时间进行格式，所以将时间格式函数配置到全局。

			
		

	





	

		

			

				
					
vue3配置全局参数(挂载全局方法)以及组件使用方法

				
			

			

				

					温情
				

				

					04-18
					
					5784
					
				

			

		

		

			
				
vue2的方式
1. 全局挂载  Vue.property.xxx
import Vue from "vue";
import axios from "axios";

Vue.prototype.$http= axios;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

2. 组件使用
this.$http.xxx();

vue3的方式
1. 全局挂载 app.config.globalPrope

			
		

	





	

		

			

				
					
VUE3添加全局变量

				
			

			

				

					piglite的专栏
				

				

					08-27
					
					1657
					
				

			

		

		

			
				
在vue3.0中注入全局方法不是在prototype上挂载了，而是添加在config.globalProperties属性上。虽然已经不存在使用prototype时可能出现的覆盖问题，但是加个。符号还是继承vue2的规范习惯代表全局。

			
		

	





	

		

			

				
					
前端面试：vue3中怎么设置全局变量

				
			

			

				

					前端金牌摸鱼达人
				

				

					07-05
					
					4822
					
				

			

		

		

			
				
vue3中怎么设置全局变量

			
		

	





	

		

			

				
					
vue3 挂载全局公共方法/变量/数据

				
			

			

				

					TS_144636的博客
				

				

					09-29
					
					1183
					
				

			

		

		

			
				
vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的朋友可以用 proxy 进行替代。1、在 main.js 通过两种方法注入全局函数  asyncDate ，分别利用了 app.config.globalProperties 和 provide。-------------------------正文开始---------------------

			
		

	





	

		

			

				
					
vue3+ts挂载全局变量的使用

				
			

			

				

					01-07
				

			

		

		

			
				
### 定义和使用全局变量

在 Vue 3 和 TypeScript 的项目中定义并使用全局变量可以通过多种方式实现。一种常见的方式是在 `main.ts` 或者专门创建的 `.d.ts` 文件中扩展 Vue 应用实例属性。

#### 方法一：通过插件机制注册全局变量

可以编写一个简单的插件来向应用注入全局属性：

```typescript
// plugins/globalVariables.ts
import { App } from 'vue';

const GlobalPlugin = {
    install(app: App, options?: any) {
        app.config.globalProperties.$globalVar = "This is a global variable";
    }
};

export default GlobalPlugin;
```

接着，在项目的入口文件引入此插件：

```typescript
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import GlobalPlugin from './plugins/globalVariables';

createApp(App).use(GlobalPlugin).mount('#app');
```

这样就可以在整个应用程序中的任何组件里访问 `$globalVar` 属性了[^1]。

#### 方法二：利用 Composition API 创建可组合函数

对于更复杂的场景，推荐采用 Composition API 来封装逻辑，并将其作为 composable 函数导出给其他模块使用:

```typescript
// composables/useGlobalVariable.ts
import { ref } from 'vue';

function useGlobalVariable() {
    const globalMessage = ref('Hello World');

    function updateMessage(newMsg:string){
      globalMessage.value=newMsg;
    }

    return { globalMessage ,updateMessage};
}

export default useGlobalVariable;
```

然后可以在任意组件内部调用这个 composable 函数获取到所需的响应式数据或方法[^2]:

```javascript
<script setup lang="ts">
import useGlobalVariable from &#39;@/composables/useGlobalVariable&#39;

const { globalMessage, updateMessage} = useGlobalVariable();
</script>
<template>
  <div>{{ globalMessage }}</div>
  <!-- 更改消息 -->
  <button @click="updateMessage(&#39;New Message&#39;)">Change Msg</button>
</template>
```

这两种方法都可以有效地管理和共享状态，但是当涉及到 Vuex 这样的集中化状态管理模式时，则应该考虑直接操作 store 而不是单独设置额外的全局变量。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
阿赛工作室

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值