淺談在vue項目中如何定義全域變數和全域函數，vue全域變數

淺談在vue項目中如何定義全域變數和全域函數，vue全域變數

寫在前面：

如題，在項目中，經常有些函數和變數是需要複用，比如說網站伺服器位址，從後台拿到的：使用者的登入token,使用者的地址資訊等，這時候就需要設定一波全域變數和全域函數，這兩個設定不太難，而且有一些共通之處，可能有一些朋友對此不太瞭解，所以隨便寫出來分享一波。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。

定義全域變數

原理：

設定一個專用的的全域變數模組檔案，模組裡面定義一些變數初始狀態，用export default 暴露出去，在main.js裡面使用Vue.prototype掛載到vue執行個體上面或者在其它地方需要使用時，引入該模組便可。

全域變數模組檔案：

Global.vue檔案：

<script>const serverSrc='www.baidu.com';const token='12345678';const hasEnter=false;const userSite="中國釣魚島"; export default {  userSite,//使用者地址  token,//使用者token身份  serverSrc,//伺服器位址  hasEnter,//使用者登入狀態 }</script>

使用方式1：

在需要的地方引用進全域變數模組檔案，然後通過檔案裡面的變數名字擷取全域變數參數值。

在text1.vue組件中使用：

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

使用方式2：

在程式入口的main.js檔案裡面，將上面那個Global.vue檔案掛載到Vue.prototype。

import global_ from './components/Global'//引用檔案  Vue.prototype.GLOBAL = global_//掛載到Vue執行個體上面

接著在整個項目中不需要再通過引用Global.vue模組檔案，直接通過this就可以直接存取Global檔案裡面定義的全域變數。

text2.vue：

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

Vuex也可以設定全域變數：

通過vuex來存放全域變數，這裡東西比較多，也相對複雜一些，有興趣的小夥伴們，可自行查閱資料，折騰一波、

定義全域函數

原理

建立一個模組檔案，然後在main.js裡面通過Vue.prototype將函數掛載到Vue執行個體上面，通過this.函數名，來運行函數。

1. 在main.js裡面直接寫函數

簡單的函數可以直接在main.js裡面直接寫

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

組件中調用：

this.changeData();//直接通過this運行函數

2. 寫一個模組檔案，掛載到main.js上面。

base.js檔案，檔案位置可以放在跟main.js同一級，方便引用

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();

後話

上面就是如何定義全域變數 全域函數的內容了，這裡的全域變數全域函數可以不局限於vue項目，vue-cli是用了webpack做模組化，其他模組化開發，定義全域變數、函數的套路基本上是差不多。上文只是對全域變數，全域函數的希望看完本文能給大家一點協助。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。