vue3中 全局变量在 js文件中引入 并使用

最新推荐文章于 2025-10-23 08:26:51 发布
原创 最新推荐文章于 2025-10-23 08:26:51 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

在 Vue 3 中，你可以通过创建一个自定义的 JavaScript 模块来定义全局变量，并在需要的地方导入这个模块。以下是一个简单的例子：

1.创建一个全局变量文件（例如 global-vars.js）

// global-vars.js
const globalVars = {
   
   
  API_URL: 'https://api.example.com',
  GLOBAL_FLAG: true
};
 
export default globalVars;

2.在 Vue 组件中导入这个全局变量模块并使用它：


                

                
                
        

    

  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
vue3项目引入本地js文件，实现一个音频播放按钮

				
			

			

				

					榕城候佳人的博客
				

				

					02-18
					
					1849
					
				

			

		

		

			
				
目前有一个需求就是在网页上放置一个音乐控制按钮，并且是在vue3项目里面。于是小白的我遇到了2个问题，第一个问题是如何实现没有进度条的播放按钮，这个网上有现成的代码，可以通过js代码切换不同的图片或者是别的样式，并不算难；第二个问题是如何在vue3项目中引入js文件，这个给刚刚接触vue3的我带来了一点麻烦。首先声明这个功能只涉及了我的3个页面，一个是vue组件，另一个就是自建的本地js文件，还有一个就是vue项目自带的index.html文件。最后一步是在index.html文件引入js文件。

			
		

	



                

            
              



	

		

			

				
					
vue项目，普通js文件添加全局变量

				
			

			

				

					youhebuke225的博客
				

				

					04-26
					
					1402
					
				

			

		

		

			
				
最好的实践是避免在全局作用域中定义变量，因为这可能会导致不可预测的行为和难以调试的问题。尽可能使用模块导出或 Vuex 来管理你的状态。如果你确实需要全局变量，确保它们被适当地命名和文档化，以减少潜在的冲突和误解。

			
		

	



              


  
              

                


	

		

			

				
					
vue3.js本地引入

				
			

			

				

					06-05
				

			

		

		

			
				
vue3.js

			
		

	





	

		

			

				
					
Vue 3 + TypeScript 引入 JavaScript 插件完整教程

					
最新发布

				
			

			

				

					Rysxt_的博客
				

				

					10-23
					
					977
					
				

			

		

		

			
				
/ 现在有类型提示了​​优先查找官方或社区类型定义​​ - 使用@types/插件名​​为无类型插件创建声明文件​​ - 提高代码质量和开发体验​​合理使用类型断言​​ - 在确保安全的情况下使用as语法​​逐步替换 any 类型​​ - 从临时方案过渡到完整类型定义​​封装复杂插件​​ - 为常用插件创建 Vue 专用封装。

			
		

	



		

			
		



	

		

			

				
					
Vue3如何引用全局JS文件

					
热门推荐

				
			

			

				

					weixin_53200369的博客
				

				

					03-29
					
					3万+
					
				

			

		

		

			
				
文章目录前言一、如何引用全局JS文件

前言
Vue3相较于之前的版本有了不少变化，如引用全局Js文件

一、如何引用全局JS文件
1、先创建一个JS文件放在Common 目录下,随意写一些内容,文件命名为util.js(命名随意)
//方法体
function show(){
 	console.log("我是测试js");
}
//导出
export default{
	show:show
}

2、在main.js中引用，这里Vue3和之前的版本就有所不同
之前Vue版本的引用：
//引入js文件
i

			
		

	





	

		

			

				
					
vue3引入全局js

				
			

			

				

					sportman0的博客
				

				

					10-19
					
					1505
					
				

			

		

		

			
				
mapappconfigglobalProperties。

			
		

	





	

		

			

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

				
			

			

				

					11-28
				

			

		

		

			
				
在Vue.js框架中，设置全局变量或数据是十分常见的需求，尤其在大型项目中，为了在各个组件之间共享状态和信息，全局变量的使用显得尤为重要。本文将详细讲解如何在Vue中实现全局变量的设置，并提供一个实际示例。  ...

			
		

	





	

		

			

				
					
Vue中定义全局变量与常量的各种方式详解

				
			

			

				

					12-01
				

			

		

		

			
				
本文主要跟大家介绍了关于Vue定义全局变量与常量的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍： 我想要定义一个变量, 在项目的任何地方都可以访问到, 不需要每一次使用的时候, 都引入...

			
		

	





	

		

			

				
					
vue中如何引入全局样式变量文件

				
			

			

				

					m0_37437840的博客
				

				

					07-15
					
					656
					
				

			

		

		

			
				
配置vue.config.js文件，使得全局都能使用 less|scss 变量，而不用每个文件单独引入。

			
		

	





	

		

			

				
					
Vue中全局变量的定义和使用

				
			

			

				

					10-16
				

			

		

		

			
				
在Vue开发过程中，有时我们需要在多个组件之间共享数据或状态，这时就涉及到全局变量的定义和使用。Vue中全局变量的定义通常不是首选方案，因为这可能会导致代码耦合度提高，不易维护。然而，在某些特定场景下，如...

			
		

	





	

		

			

				
					
在Vue3开发中如何引用js文件

				
			

			

				

					繁若华尘的博客
				

				

					02-20
					
					3834
					
				

			

		

		

			
				
在 Vue3 中引用 JavaScript 文件的方式与 Vue2 类似，但需要注意一些 Composition API 的特性和模块化规范的变化。

			
		

	





	

		

			

				
					
Vue 中如何引入第三方 JS 库

				
			

			

				

					2401_84411018的博客
				

				

					04-27
					
					1849
					
				

			

		

		

			
				
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

			
		

	





	

		

			

				
					
vue3.0本地引入vue.js

				
			

			

				

					qq_25166649的博客
				

				

					08-31
					
					6501
					
				

			

		

		

			
				
vue3.0本地引入vue.js;优化性能

			
		

	





	

		

			

				
					
vue3中在js文件中引入js、vue、路由等文件

				
			

			

				

					qq_53720223的博客
				

				

					07-21
					
					202
					
				

			

		

		

			
				
2.引入vue组件获取到dom元素，并传入值。1.引入pinia状态管理js文件。

			
		

	





	

		

			

				
					
vue 三级联动（引入外部js）（element-ul插件）

				
			

			

				

					m0_72189003的博客
				

				

					10-17
					
					2038
					
				

			

		

		

			
				
vue三级联动（引入外部js）

			
		

	





	

		

			

				
					
【踩坑】Vue3中在public中引入js插件作为全局变量使用

				
			

			

				

					前面的区域以后再来探索吧
				

				

					10-12
					
					1061
					
				

			

		

		

			
				
- 引入URL配置文件，打包后可直接dist文件夹中修改配置 -->可以看到，把main.js放在最后加载，确保引入的js插件的变量已经可以被使用。-- 一定要把main.js放在最后引入 -->-- 引入webrtc组件 -->标签位于引入 Vue 应用的。

			
		

	





	

		

			

				
					
VUE3.0引入本地js文件

				
			

			

				

					qq_41289165的博客
				

				

					11-24
					
					5814
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
vue3，在ts中引入js文件

				
			

			

				

					weixin_44910510的博客
				

				

					09-25
					
					2094
					
				

			

		

		

			
				
有时候需要再ts中引入js文件时，因为ts中需要定义变量类型。js中不需要，就会报错，如下图所示。

			
		

	





	

		

			

				
					
vue3中全局变量可修改

				
			

			

				

					03-26
				

			

		

		

			
				
### Vue3 中全局变量的定义、修改与使用

#### 方法一：通过 Vuex 实现全局状态管理
Vuex 是 Vue 的官方状态管理库，适用于复杂的项目场景。可以通过创建 store 来集中存储和管理应用中的数据。

1. **安装并初始化 Vuex**
   首先需要安装 `vuex` 并配置到项目中。
   ```bash
   npm install vuex@next --save
   ```

2. **创建 Store 文件**
   创建一个名为 `store.js` 的文件，并在其中定义初始状态和更改逻辑。
   ```javascript
   import { createStore } from 'vuex';

   const store = createStore({
     state() {
       return {
         globalVariable: 'Initial Value' // 初始值
       };
     },
     mutations: {
       updateGlobalVariable(state, newValue) {
         state.globalVariable = newValue;
       }
     },
     actions: {
       changeGlobalVariable({ commit }, newValue) {
         commit('updateGlobalVariable', newValue);
       }
     }
   });

   export default store;
   ```

3. **引入 Store 至主程序**
   在 `main.js` 或者入口文件中注册该 store。
   ```javascript
   import { createApp } from 'vue';
   import App from './App.vue';
   import store from './store'; 

   const app = createApp(App);
   app.use(store).mount('#app');
   ```

4. **访问和修改全局变量**
   可以在组件内部通过 `$store.state` 和 `$store.commit` 访问或改变全局变量。
   ```javascript
   this.$store.dispatch('changeGlobalVariable', 'New Value'); // 修改操作[^1]
   console.log(this.$store.state.globalVariable);              // 获取当前值
   ```

---

#### 方法二：利用 provide/inject API 设置全局变量
Vue3 提供了新的组合式 API——`provide` 和 `inject`，可以直接传递父级作用域的数据给子组件而无需逐层传递 props。

1. **提供全局变量 (Provide)**  
   将全局变量注入至根实例，在 `App.vue` 中完成此过程。
   ```javascript
   <script>
   import { ref, provide } from &#39;vue&#39;;

   export default {
     setup() {
       const globalVar = ref(&#39;Default Global Variable&#39;);

       function setGlobalValue(newValue) {
         globalVar.value = newValue;
       }

       provide(&#39;globalVar&#39;, globalVar);          // 注入响应式的全局变量
       provide(&#39;setGlobalValue&#39;, setGlobalValue); // 同时注入修改函数

       return {};
     }
   };
   </script>
   ```

2. **消费全局变量 (Inject)**  
   在任何后代组件里都可以轻松获取这些被提供的资源。
   ```javascript
   <script>
   import { inject, onMounted } from &#39;vue&#39;;

   export default {
     setup() {
       const globalVar = inject(&#39;globalVar&#39;);        // 接收全局变量
       const setGlobalValue = inject(&#39;setGlobalValue&#39;); // 接受修改方法

       onMounted(() => {
         console.log(globalVar.value);               // 输出默认值 Default Global Variable[^2]
         setGlobalValue(&#39;Updated by Inject&#39;);      // 更新其值
       });

       return { globalVar };                       // 返回以便模板绑定显示
     }
   };
   </script>

   <template>
     {{ globalVar }}
   </template>
   ```

---

#### 方法三：借助 Mixin 定义全局行为
虽然 Vue3 更推荐 Composition API 方式开发，但在某些情况下仍可沿用 Options API 下的传统 mixin 技术来共享跨多个组件的行为模式。

1. **编写通用混入模块**
   建立单独的一个 js 文件保存公共属性与功能。
   ```javascript
   // mixins/globalMixin.js
   export default {
     data() {
       return {
         sharedState: null,
       };
     },
     methods: {
       initializeSharedState(value) {
         this.sharedState = value || &#39;Fallback Initializer&#39;;
       },
     },
   };
   ```

2. **导入并在目标组件中运用**
   然后只需简单地将其加入所需地方即可同步享有相同特性。
   ```javascript
   <script>
   import globalMixin from &#39;@/mixins/globalMixin&#39;;

   export default {
     mixins: [globalMixin],
     mounted() {
       this.initializeSharedState(&#39;Set via Mixture&#39;);
       alert(this.sharedState);                    // 显示 Set via Mixture
     }
   };
   </script>
   ```

---

#### 方法四：直接挂载于全局对象上
对于小型应用程序来说可能更倾向于简便快捷的方式，则可以选择把自定义字段附加到 Vue 应用本身或者其他 JavaScript 全局命名空间下。

1. **扩展原型链**
   这种方式允许我们向每一个 Vue 组件暴露额外的能力。
   ```javascript
   import { getCurrentInstance } from &#39;vue&#39;;

   const instance = getCurrentInstance();
   if (instance && !instance.proxy?.$opMap) {
     Object.defineProperty(instance.proxy, &#39;$opMap&#39;, {
       get() {
         return window.opMap || {};                // 默认指向 Window 对象下的 opMap 属性[^4]
       },
     });
   }
   ```

2. **实际调用演示**
   此处假设已经存在了一个预设好的映射表结构可供查询。
   ```javascript
   console.log(this.$opMap[&#39;operate&#39;]);           // 动态读取 operate 字段的内容
   ```

---

### 总结
以上介绍了四种主流途径帮助开发者们解决 Vue3 开发过程中遇到关于如何高效设定及调整全局变量的需求。每一种都有各自适用范围，请依据具体业务需求选取最合适方案实施部署。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值