vue項目中定義全局變量、函數的幾種方法

前言

在項目中，常常會複用一些變量和函數，好比用戶的登陸token，用戶信息等。這時將它們設爲全局的就顯得很重要了，全局變量和全局函數之間有一些相通之處，它們其實很簡單，可是有些人可能還不太瞭解。簡單總結分享一波，但願對你有所幫助。

定義全局變量

原理：使用模塊（.js或.vue文件）來管理全局變量，最後使用export暴露出去 （最好導出的格式爲對象，方便在其餘地方調用），當其它地方須要使用時，用import導入該模塊

一、使用全局變量專用模塊，掛載到main.js文件上面

全局變量模塊Global.vue定義以下：

const token='12345678';
const userStatus=false;
export default {
    token, // 用戶token身份
    userStatus // 用戶登陸狀態
}
複製代碼

模塊裏的變量用export暴露出去，當其它地方須要使用時，引入模塊即可。

使用全局變量：

import global from '../../components/Global'//引用模塊進來
export default {
data () {
    return {
         token:global.token,//將全局變量賦值到data裏面
        }
    }
}
複製代碼

二、全局變量模塊掛載到Vue.prototype上

Global.vue文件同上，在項目入口的main.js裏配置：

import global from '../../components/Global'
Vue.prototype.GLOBAL = global
複製代碼

掛載以後，在須要引用全局變量的模塊處，不需再導入全局變量模塊，而是直接用this就能夠引用了，以下:

export default {
  data () {
    return {
     token: this.GLOBAL.token,
    }
  }
}
複製代碼

方法一跟方法二的主要區別是，方法二全局只須要導入一次就能夠，簡單方便。

三、使用vuex定義全局變量

Vuex是一個專爲Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態。所以能夠存放着全局量。

// index.js文件裏定義vuex
import state from './state'
export default new Vuex.Store({
  actions,
  getters,
  mutations,
  state,
})
// state.js裏面存放全局變量，而且暴露出去
const state = {
  token：'12345678',
  language: 'en',
}

export default state
複製代碼

使用的時候，在須要引用全局變量的模塊處直接使用this.$store調用

export default {
    methods: {
      getInternation() {
        if (this.$store.state.language === 'en') {
          this.internation = 2
        } else if (this.$store.state.language === 'zh_CN') {
          this.internation = 1
        }
      }
    } 
}
複製代碼

由於Vuex有點繁瑣，有點殺雞用牛刀的感受。所以認爲並無必要使用它。上面只是簡單的使用，若是想要具體瞭解使用方式，能夠去查閱資料具體掌握。

定義全局函數

原理：在main.js裏面經過Vue.prototype將函數掛載到Vue實例上面，經過this.函數名，來運行函數。

一、在main.js文件直接定義方法

簡單的函數能夠直接寫在main.js文件裏定義。

// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
  alert('執行成功');
}
複製代碼

使用的時候組件裏直接調用。

//直接經過this運行函數，這裏this是vue實例對象
this.changeData();
複製代碼

二、使用全局函數專用模塊，掛載到main.js上面

base.js文件，文件位置能夠放在跟main.js同一級，方便引用（這點能夠依據我的習慣決定）。

exports.install = function (Vue, options) {
    Vue.prototype.changeData = function (){
        alert('執行成功');
    };
};
複製代碼

main.js引入並使用。

import base from './base'
Vue.use(base);
複製代碼

全部的組件裏就能夠調用該函數。

this.changeData();
複製代碼

結語

以上是vue中全局變量和全局函數使用的所有內容。但願總結的東西對你有所幫組。還不太瞭解的能夠多看幾遍，你們加油！！！

參考文章

• Vue中如何定義全局函數
• 在vue項目中 如何定義全局變量 全局函數