1、创建文件来存放Vue的全局变量和全局方法-common.vue
<script>
const userName = 'pshdhx'
function add(x,y){
return x+y
}
export default{
userName,
add,
}
</script>
2、引入common.vue文件使用定义好的变量和方法
<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>
三、使用前端仓库vuex
vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。以一个全局单例模式管理
当应用遇到多个组件共享状态时使用Vuex，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。
1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
具体请参考我写的vuex的博文
四、使用本地存储webstorage存放全局变量
本地存储分为localStorage和sessionStorage
localStorage：永久性，一直存在于浏览器中，除非用户手动清除localStorage；一般为5M浏览器不同有些许区别；不参与和服务器的通信。
sessionStorage：在当前会话下有效，关闭页面和浏览器清除后失效；一般为5M浏览器不同有些许区别；不参与和服务器的通信。
API：二者的api形式相同
localStorage.setItem("key","value"); //以“key”为名称存储一个值“value”
localStorage.getItem("key"); //获取名称为“key”的值
localStorage.removeItem("key"); //删除名称为“key”的信息。
localStorage.clear(); //清空localStorage中所有信息
五、使用cookie存储
这种方式极不推荐，毕竟大小限制，还需要设置过期时间。
cookie在过期时间之前一直有效即使窗口或浏览器关闭；存放数据大小为4k左右；有个数限制（随浏览不同）一般不能超过20个；与服务端通信，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。