vue 为全局变量赋值_vue项目中定义全局变量、函数的几种方法

本文介绍了在Vue项目中定义和使用全局变量及函数的三种方法:1) 创建全局变量模块并挂载到main.js;2) 使用Vue.prototype挂载变量;3) 使用Vuex管理状态。对于全局函数,可以通过Vue.prototype在main.js中定义或创建单独模块挂载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

在项目中,经常会复用一些变量和函数,比如用户的登录token,用户信息等。这时将它们设为全局的就显得很重要了,全局变量和全局函数之间有一些相通之处,它们其实很简单,但是有些人可能还不太了解。简单总结分享一波,希望对你有所帮助。

定义全局变量

原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出的格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块

1、使用全局变量专用模块,挂载到main.js文件上面

全局变量模块Global.vue定义如下:

const token='12345678';

const userStatus=false;

export default {

token, // 用户token身份

userStatus // 用户登录状态

}

模块里的变量用export暴露出去,当其它地方需要使用时,引入模块便可。

使用全局变量:

import global from '../../components/Global'//引用模块进来

export default {

data () {

return {

token:global.token,//将全局变量赋值到data里面

}

}

}

2、全局变量模块挂载到Vue.prototype上

Global.vue

### 在 Vue定义和使用全局变量方法Vue 项目中,可以通过多种方式来定义和使用全局变量。以下是几种常见的方法及其具体实现: #### 方法一:通过 `Vue.prototype` 添加全局属性或方法Vue 2 中,可以直接利用 `Vue.prototype` 来定义全局变量函数。这种方式使得任何组件都可以访问这些全局资源。 ```javascript // main.js 或入口文件中 import Vue from 'vue'; // 定义全局变量 Vue.prototype.$globalVar = '这是一个全局变量'; // 定义全局函数 Vue.prototype.changeData = function () { console.log('这是全局函数'); }; // 组件内部调用 console.log(this.$globalVar); // 输出: 这是一个全局变量 this.changeData(); // 调用全局函数并打印日志 ``` 这种方法简单易用,但在 Vue 3 中已被废弃[^2]。 --- #### 方法二:通过 Vuex 状态管理工具 Vuex 是专门为 Vue 提供的状态管理模式,适用于复杂的应用场景。它允许集中存储数据并通过特定的方式进行修改和读取。 ```javascript // store/index.js import { createStore } from 'vuex'; export default createStore({ state: { globalVariable: '这是通过 Vuex 设置的全局变量' }, mutations: { updateGlobalVariable(state, newValue) { state.globalVariable = newValue; } } }); // 在组件中使用 import { mapState } from 'vuex'; export default { computed: { ...mapState(['globalVariable']) } }; console.log(this.globalVariable); ``` 此方法适合需要跨多个组件共享状态的情况[^1]。 --- #### 方法三:基于 Vue 3 的 Composition API 和 `appContext` 在 Vue 3 中推荐使用 Composition API 配合 `getCurrentInstance()` 获取当前实例上下文中的配置对象来进行全局变量的操作。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 定义全局变量 app.config.globalProperties.$key = '这是 Vue 3 的全局变量'; // 页面中使用 import { getCurrentInstance } from 'vue'; export default { setup() { const internalInstance = getCurrentInstance(); const global = internalInstance.appContext.config.globalProperties; console.log(global.$key); // 访问全局变量 } }; ``` 该方法充分利用了 Vue 3 新特性,在现代项目中有较高的适用性[^3]。 --- #### 方法四:直接挂载到 `window` 对象 如果不需要依赖框架本身的功能,也可以将变量直接挂在浏览器的全局作用域下(即 `window` 对象)。不过需要注意的是,这种做法可能会污染全局命名空间,并带来潜在冲突风险。 ```javascript // 全局定义 window.myGlobalVar = '这是 window 上的全局变量'; // 使用时无需导入 console.log(window.myGlobalVar); ``` 尽管方便快捷,但通常仅用于调试或其他特殊需求场合。 --- ### 总结 以上介绍了四种不同的方式来实现在 Vue 应用程序内的全局变量声明与应用。每种方案都有其特点以及适应范围,请依据实际业务情况选取最合适的策略实施即可。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值