在Vue项目中定义全局变量的几种常用方法

文章目录

• • • • 定义全局变量的方法
      • • 1、使用Vue.prototype定义全局变量
        • 2、使用env文件定义全局变量
        • 3、使用vuex定义全局变量
        • 4、使用Vue.mixin定义全局变量
        • 5、使用localStorage 或 sessionStorage定义全局变量
        • 6、vue3中配置globalProperties
        • 7、自动配置打包版本日期
        • • 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(import.meta.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)
                                                      },