Vue-全局變量和方法

一、單文件引入

1、創建存放全局變量和方法的vue文件

　　Common.uve

<script>
  const userName = 'yangjing';
  function add(a,b) {
    return a+ b
  }
  export default {
    userName,
    add
  }
</script>

2、在需要使用的組件（A組件和B組件）中引入Common.uve

<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: "Details",
    data () {
      return {
        name: Common.userName,
        num: ''
      }
    },
    methods: {
      add() {
        this.num = Common.add(3,6)
      }
    }
  }
</script>

在A組件中修改全局變量userName時在B組件中可以看到userName是更新了的

二、全局引入 全局變量模塊掛載到vue原型中

如果再項目中在多個地方使用全局變量和方法用第一種方式引入肯定是相當繁瑣的，因為需要在使用的地方都要引入一次；那么為了提高效率現在在main.js中引入一次然后掛載到vue原型上（Vue.portotype）

1、在main.js中引入文件，並掛載到Vue原型上

import Common from '@/components/Common'
Vue.prototype.Common = Common;

2、在需要使用的組件中使用 this

<template>
  <div>
    <h2 @click="changeName">{{name}}</h2>
    <h2 @click="add">3+6 = {{num}}</h2>
  </div>
</template>

<script>
  export default {
    name: "Details",
    data () {
      return {
        name: this.Common.userName,
        num: ''
      }
    },
    methods: {
      add() {
        this.num = this.Common.add(3,6)
      }
    }
  }
</script>

拓展：

三、使用Vue中的狀態管理Vuex

如果數據量小則不推薦使用Vuex，殺雞就不用宰牛刀了吧。 

詳細使用：https://www.cnblogs.com/yangchin9/p/11003791.html

四、使用本地存儲（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保存過多數據會帶來性能問題。