Vue.js项目中全面解析定义全局变量的常用方法与技巧

@[TOC]

在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。

定义全局变量的方法

1、使用Vue.prototype定义全局变量

通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。

  • 在main.js定义全局变量
ini 复制代码
// main.js
Vue.prototype.baseUrl = "https://www.example.com/api"
  • 在页面中使用
xml 复制代码
<template>
  <div>
    {{baseUrl}}
  </div>
</template>
  • 在方法中使用
xml 复制代码
<script>
created() {
    console.log(this.baseUrl)
},
</script>
2、使用env文件定义全局变量

在Vue项目的根目录中创建一个.env文件,用于存储一些全局变量。

  • 在.env文件中定义
ini 复制代码
VUE_APP_BASE_URL = "https://www.example.com/api"
  • 在方法中使用
xml 复制代码
<script>
created() {
    const baseUrl = process.env.VUE_APP_BASE_URL
    console.log(baseUrl)
},
</script>
3、使用vuex定义全局变量

vuex 是 vue 的官方状态管理库,可以用于管理全局状态。

  • 定义全局变量
php 复制代码
//store/index.js
export default new Vuex.Store({
  state: {
    baseUrl: "https://www.example.com/api"
  },
})
  • 在页面中使用
xml 复制代码
<template>
  <div>
    {{this.$store.state.baseUrl}}
  </div>
</template>
  • 在方法中使用
xml 复制代码
<script>
created() {
    const baseUrl = this.$store.state.baseUrl
    console.log(baseUrl)
},
</script>
4、使用Vue.mixin定义全局变量

通过混入(mixin)的方式,可以将一些公共的属性或方法混入到所有组件中。

  • 创建一个全局变量的js文件。示例文件路径为:./utils/globalVar.js
javascript 复制代码
//globalVar.js
export default {
    data() {
        return {
            baseUrl: "https://www.example.com/api"
        };
    }
}
  • 在项目的 main.js 文件中引入该 globalVar.js 文件并使用 Vue.mixin() 方法将之全局混入:
javascript 复制代码
//main.js
import globalVar from './utils/globalVar.js'
Vue.mixin(globalVar)
  • 在页面中使用
xml 复制代码
<template>
  <div>
    {{baseUrl}}
  </div>
</template>
  • 在方法中使用
xml 复制代码
<script>
created() {
    console.log(this.baseUrl)
},
</script>
5、使用localStorage 或 sessionStorage定义全局变量

通过将变量存储在 localStorage 或 sessionStorage 中,可以在所有组件中共享该变量。

  • 在main.js中定义
javascript 复制代码
localStorage.setItem("baseUrl", "https://www.example.com/api")
  • 在方法中使用
xml 复制代码
<script>
created() {
    const baseUrl = localStorage.getItem("baseUrl")
    console.log(baseUrl)
},
</script>
6、vue3中配置globalProperties

vue3提供了专门公共数据配置的方式: globalProperties、getCurrentInstance

  • 在main.js中定义
javascript 复制代码
//main.js
import { createApp } from 'vue'
import App from './App.vue'
const app=createApp(App)
app.config.globalProperties.baseUrl = "https://www.example.com/api"
app.mount('#app')
  • 在页面中使用
xml 复制代码
<template>
  <div>
    {{baseUrl}}
  </div>
</template>
  • 在方法中使用
xml 复制代码
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
console.log(proxy.baseUrl)
</script>
7、自动配置打包版本日期

在前端开发过程中,总会遇到前端包部署之后,不知道是否成功,是否替换了原来的包,看不出来事什么时候的包。我们可以在控制台输出一个打包的日期。这样就很容易区分前端包的版本日期了。

7.1、vue3在vite.config.js中定义环境变量。获取当前打包日期时间。
  • 在vite.config.js配置
javascript 复制代码
//vite.config.js
process.env.VITE_APP_VERSION = JSON.stringify(new Date().toLocaleString())
  • 在App.vue中打印
xml 复制代码
<script setup>
    console.log(import.meta.env.VITE_APP_VERSION)
</script>
7.2、vue2在vue.config.js中定义环境变量。获取当前打包日期时间。
  • 在vue.config.js配置
javascript 复制代码
//vue.config.js
const webpack = require('webpack');
module.exports = {
  configureWebpack: {
    plugins: [
     new webpack.DefinePlugin({
       "process.env.VERSION": JSON.stringify(new Date().toLocaleString())
     })
   ]
  }
}
  • 在App.vue中打印
xml 复制代码
<script>
created() {
    console.log(process.env.VERSION)
},
</script>
相关推荐
beelan2 分钟前
v-on的思考
前端
山河木马5 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502195 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平9 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手11 分钟前
大保剑:Promise的有趣体验
javascript
李大玄11 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵12 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾17 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove24 分钟前
常见 npm 报错问题
前端·npm
sunbyte24 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss