Vue使用Global设置全局变量和常量

本文介绍了如何在Vue项目中设置和使用全局变量及常量。通过编辑Global.vue文件并在main.js中引入,可以实现全局范围内的访问。若不希望挂载到GLOBAL对象上,可直接在相应vue组件的script部分导入。

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

  1. 首先编辑Global.vue文件
<script>
//首页
const HOME = 'https://www.yangshuaionline.com/'
//保存全局状态
import Vue from 'vue'
let State = new Vue({
  data() {
    return {
      is_phone: false,
    }
  },
})
export default {
  HOME,
  State,
}
</script>
  1. 在main.js文件中引入Global.vue
import Global from './utils/Global'
Vue.prototype.GLOBAL = Global //挂载到Vue实例上面
  1. 使用方法
this.GLOBAL.State.is_phone = true
this.GLOBAL.HOME
  1. 如果不想挂载到GLOBAL上面,只需要把步骤2中的import引入对应的vue文件的script中即可,使用方法
import Global from './utils/Global'
Global.State.is_phone = true
Global.HOME
### 设置使用全局 Token 变量 #### 使用 Vuex 管理状态 为了使 `token` 成为全局可访问的状态,可以利用 Vuex 来集中管理应用的数据。安装 Vuex 后,在 store 中定义 state 属性来保存 token 值。 ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { token: '' }, mutations: { setToken (state, payload) { state.token = payload } } }) export default store ``` 在任何组件内都可以通过 `this.$store.state.token` 访问该值[^1]。 #### 将全局变量挂载至 Vue 实例原型链 另一种方法是把 token 添加到 Vue 的 prototype 上,这样所有的 Vue 组件都能直接通过 `this` 关键字获取它。 ```javascript // main.js 或入口文件中配置 Object.defineProperty(Vue.prototype, '$global', { get () { return this.$root._global || {} }, configurable: true, enumerable: false }) Vue.config.globalProperties.$global = {} new Vue({ el: '#app', render: h => h(App), created () { this.$root._global = Vue.config.globalProperties.$global } }) ``` 之后可以在组件里像下面这样做: ```html <template> <div>{{ $global.token }}</div> </template> <script> export default { mounted() { console.log(this.$global.token); } } </script> ``` 这种方式使得无需引入额外依赖就能实现全局共享数据的目的[^4]。 #### 直接创建 Global 文件并导入 还可以单独建立一个 JavaScript 文件用于存储公共常量变量,比如命名为 `Global.js`: ```javascript window.GLOBAL = window.GLOBAL || {}; GLOBAL.token = ''; ``` 随后在其他地方只需要简单引用这个对象即可读取其中的内容。 ```html <template> <div>{{ GLOBAL.token }}</div> <!-- 如果是在浏览器环境中 -- 或者 --> <div>{{ token }}</div> </template> <script> import * as GLOBAL from '@/path/to/global'; export default { computed: { token() { return GLOBAL.token; } } }; </script> ``` 这种方法适用于小型项目或是那些不打算采用复杂状态管理模式的应用程序[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值