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

2024-06-16 10:08| 来源: 网络整理| 查看: 265

文章目录定义全局变量的方法1、使用Vue.prototype定义全局变量2、使用env文件定义全局变量3、使用vuex定义全局变量4、使用Vue.mixin定义全局变量5、使用localStorage 或 sessionStorage定义全局变量6、vue3中配置globalProperties7、自动配置打包版本日期7.1、vue3在vite.config.js中定义环境变量。获取当前打包日期时间。7.2、vue2在vue.config.js中定义环境变量。获取当前打包日期时间。

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

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

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

在main.js定义全局变量 // main.js Vue.prototype.baseUrl = "https://www.example.com/api" 在页面中使用 {{baseUrl}} 在方法中使用 created() { console.log(this.baseUrl) }, 2、使用env文件定义全局变量

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

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

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

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

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

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

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

在main.js中定义 localStorage.setItem("baseUrl", "https://www.example.com/api") 在方法中使用 created() { const baseUrl = localStorage.getItem("baseUrl") console.log(baseUrl) }, 6、vue3中配置globalProperties

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

在main.js中定义 //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') 在页面中使用 {{baseUrl}} 在方法中使用 import { getCurrentInstance } from "vue" const { proxy } = getCurrentInstance() console.log(proxy.baseUrl) 7、自动配置打包版本日期

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

7.1、vue3在vite.config.js中定义环境变量。获取当前打包日期时间。在vite.config.js配置 //vite.config.js process.env.VITE_APP_VERSION = JSON.stringify(new Date().toLocaleString()) 在App.vue中打印 console.log(importa.env.VITE_APP_VERSION) 7.2、vue2在vue.config.js中定义环境变量。获取当前打包日期时间。在vue.config.js配置 //vue.config.js const webpack = require('webpack'); module.exports = { configureWebpack: { plugins: [ new webpack.DefinePlugin({ "process.env.VERSION": JSON.stringify(new Date().toLocaleString()) }) ] } } 在App.vue中打印 created() { console.log(process.env.VERSION) },

【本文地址】

公司简介

联系我们