1. Create a file to store Vue's global variables and global methods-common.vue
<script>
const userName = 'pshdhx'
function add(x,y){
return x+y
}
export default{
userName,
add,
}
</script>
2. Introduce the common.vue file and use the defined variables and methods
<template>
<div>
<h2 @click="changeName">{
{name}}</h2>
<h2 @click="add">3+6 = {
{num}}</h2>
</div>
</template>
<script>
import Common from '@/components/common'
export default {
name: "test",
data () {
return {
name: common.userName,
num: ''
}
},
methods: {
add() {
this.num = common.add(3,6)
}
}
}
</script>
Three, use the front-end warehouse vuex
Vuex is state management, which is to solve the problem of data sharing between components. The data changes of one component will be mapped to other components that use this data. If you refresh the page, all the previously stored vuex data will be initialized. Manage in a global singleton mode
. Use Vuex when the application encounters multiple component sharing states, that is: multiple views depend on the same state, and the behavior of different views needs to change the same state.
1. Vuex's state storage is responsive. When the Vue component reads the state from the store, if the state in the store changes, the corresponding component will be updated accordingly.
2. You cannot directly change the state in the store. The only way to change the state in the store is to explicitly commit the mutation. This allows us to easily track the changes of each state, so that we can implement some tools to help us better understand our applications.
For details, please refer to the vuex blog post I wrote
Fourth, use local storage webstorage to store global variables
Local storage is divided into localStorage and sessionStorage
localStorage: it is permanent and always exists in the browser, unless the user manually clears localStorage; generally there is a slight difference between 5M browsers; it does not participate in the communication with the server.
sessionStorage: valid in the current session, and invalid after closing the page and clearing the browser; generally, there is a slight difference between 5M browsers; it does not participate in the communication with the server.
API: Both have the same api form
localStorage.setItem("key","value"); //Store a value "value" with "key" as the name
localStorage.getItem("key"); //Get the name as " The value of
"key" localStorage.removeItem("key"); //Delete the information named "key".
localStorage.clear(); //Clear all information in localStorage
Five, use cookie storage
This method is highly not recommended. After all, the size is limited and the expiration time needs to be set.
The cookie is valid until the expiration time even if the window or browser is closed; the size of the stored data is about 4k; there is a limit (different with the browsing) and generally cannot exceed 20; when communicating with the server, it will be carried in the HTTP header every time, If you use cookies to save too much data, it will cause performance problems.