Vue全局变量和方法的使用

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保存过多数据会带来性能问题。