(二十一) js全域性檔案 全域性變數掛載 Vue.prototype

目的：就是用些全域性的變數，比如一些你自定義的ip 啥的，那為啥不用vuex。我就不，我就用這個
當然了，也有點不一樣嗎

所以我們分兩種，

1.一種是直接寫在檔案裡面直接呼叫
2.掛載到Vue.prototype 這樣就成了一個全域性的物件

首先新建檔案：（一般新建在src下面，和main.js 平齊，你放在assets裡面也行）
overallData,js

<script>
const address='www.baidu.com';
const ='12345678';
const state=false;
const ip="127.0.0.1";
  export default
  {
    address,//使用者地址
    token,//使用者token身份
    ip,//伺服器地址
    state,//使用者登入狀態
  }
</script>
 

反正你能把你需要的export出來就行

第一種：直接引用使用取值

<template>
        <div>{{ token }}</div>
</template>
     
    <script>
    import overallData from '../../components/overallData'//引用模組進來
    export default {
     name: 'text',
    data () {
        return {
             token:overallData .token,//將全域性變數賦值到data裡面，也可以直接使用overallData .token
            }
        }
    }
    </script>
    <style lang="scss" scoped>
    </style>
 

第二種：掛載資料 在 main.js 檔案裡面，將上面那個 overallData.vue 檔案掛載到 Vue.prototype。

 import overallData from './components/Global'//引用檔案
 Vue.prototype.overallData= overallData //掛載到Vue例項上面

使用

<template>
    <div>{{ token }}</div>
</template>
<script>
    export default {
        name: 'text',
        data () {
            return {
                 token:this.overallData.token,//直接通過this訪問全域性變數。
                }
            }
    }
</script>
<style lang="scss" scoped>
</style>
 

全域性函式

舉例子：
第一種全域性檔案
overallData,js

export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    },
}

import overallData from './components/Global'//引用檔案
this.overallData .setWs(client);

第二種直接在main.js裡面進行宣告掛載

//main.js
Vue.prototype.changeData = function (){//changeData是函式名
  alert('執行成功');
}

this.changeData();//直接通過this執行函式

第三種掛載到全域性，使用外掛的方式進行註冊掛載

exports.install = function (Vue, options) {
   Vue.prototype.text1 = function (){//全域性函式1
    alert('執行成功1');
};
    Vue.prototype.text2 = function (){//全域性函式2
    alert('執行成功2');
    };
};

//main.js
import base from './base'//引用
Vue.use(base);//將全域性函式當做外掛來進行註冊

//元件裡面呼叫
this.text1();
this.text2();

第三種基本上沒用過，其實為了方便，怎麼著都可以，全域性掛載我感覺不常用，就是覺得，要是不掛載，就還知道，這是個公共檔案裡面的，掛載了，直接this是方便，但是小別扭，開心就好

重要注意

你會發現
Vue.use();
Vue.prototype
Vue.prototype .$名稱

相關區別:
Vue.use() 載入外掛 ，必須要是一個物件
還有寫不寫$的用法 https://blog.csdn.net/qq_32407233/article/details/83819831
相關區別https://segmentfault.com/a/1190000019611146