Preface
In the Vue project, we need to use many variables to maintain the flow direction and state of the data. These variables can be local variables, component variables, parent-child component variables, etc., but these variables have limitations. In some scenarios, it may be necessary to share a variable in multiple components, and global variables come in handy.
Methods to define global variables
1. Define global variables using
By defining the attribute on the prototype of vue, it can be accessed in all components.
- Defining global variables
// = "/api"
- Use in the page
<template>
<div>
{{baseUrl}}
</div>
</template>
- Use in the method
<script>
created() {
()
},
</script>
2. Use env file to define global variables
Create a .env file in the root directory of the Vue project to store some global variables.
- Defined in .env file
VUE_APP_BASE_URL = "/api"
- Use in the method
<script>
created() {
const baseUrl = .VUE_APP_BASE_URL
(baseUrl)
},
</script>
3. Use vuex to define global variables
vuex is the official state management library of vue that can be used to manage global state.
- Define global variables
//store/
export default new ({
state: {
baseUrl: "/api"
},
})
- Use in the page
<template>
<div>
{{this.$}}
</div>
</template>
- Use in the method
<script>
created() {
const baseUrl = this.$
(baseUrl)
},
</script>
4. Define global variables using
By mixing, some common attributes or methods can be mixed into all components.
- Create a js file with global variables. The example file path is: ./utils/
//
export default {
data() {
return {
baseUrl: "/api"
};
}
}
- Introduce the file in the project and use the () method to blend it globally:
// import globalVar from './utils/' (globalVar)
- Use in the page
<template>
<div>
{{baseUrl}}
</div>
</template>
- Use in the method
<script>
created() {
()
},
</script>
5. Use localStorage or sessionStorage to define global variables
By storing the variable in localStorage or sessionStorage, you can share the variable in all components.
- Definition in
("baseUrl", "/api")
- Use in the method
<script>
created() {
const baseUrl = ("baseUrl")
(baseUrl)
},
</script>
6. Configure globalProperties in vue3
vue3 provides special public data configuration methods: globalProperties, getCurrentInstance
- Definition in
//
import { createApp } from 'vue'
import App from './'
const app=createApp(App)
= "/api"
('#app')
- Use in the page
<template>
<div>
{{baseUrl}}
</div>
</template>
- Use in the method
<script setup>
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance()
()
</script>
7. Automatically configure the packaging version date
During the front-end development process, you will always encounter the front-end package deployment. You don’t know whether it is successful or whether the original package has been replaced. You can’t tell when the package will happen. We can output a packaged date in the console. This makes it easy to distinguish the version date of the front-end package.
7.1. Vue3 defines environment variables in it. Get the current package date and time.
- In configuration
// .VITE_APP_VERSION = (new Date().toLocaleString())
- Print in
<script setup>
(.VITE_APP_VERSION)
</script>
7.2. Vue2 defines environment variables in it. Get the current package date and time.
- In configuration
//
const webpack = require('webpack');
= {
configureWebpack: {
plugins: [
new ({
"": (new Date().toLocaleString())
})
]
}
}
- Print in
<script>
created() {
()
},
</script>Summarize
This is the end of this article about several common methods for defining global variables in Vue projects. For more relevant content on defining global variables, please search for my previous articles or continue browsing the related articles below. I hope you will support me in the future!