vueプロジェクトでグローバル変数、関数を定義するいくつかの方法

前言
プロジェクトでは、ユーザーの登録token、ユーザ情報など、いくつかの変数や関数が多重化されることが多い。この場合、それらを大域に設定することは重要です。大域変数と大域関数の間にはいくつかの共通点がありますが、実は簡単です。簡単にまとめて一つの問題を共有します。あなたの役に立ちたいです。
グローバル変数を定義
原理：モジュール（.jsまたは.vueファイル）を使用してグローバル変数を管理し、最後にexportを使用して暴露します。（最適なエクスポートフォーマットは対象として、他のところで呼び出すのに便利です。）。他のところで使用する必要がある場合、importでモジュールを導入します。
1、グローバル変数専用モジュールを使用して、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  
    }
  }
}

2、グローバル変数モジュールをVue.prototypeにマウントする
Global.vueファイルと同じで、プロジェクトの入り口のmain.jsに配置します。

import global from '../../components/Global'
Vue.prototype.GLOBAL = global

マウント後、グローバル変数を参照する必要があるモジュールでは、グローバル変数モジュールを導入する必要はなく、直接にthisで参照できます。

export default {
 data () {
  return {
   token: this.GLOBAL.token,
  }
 }
}

方法1と方法2の主な違いは、方法2の大域は一回だけ導入すればいいです。簡単で便利です。
3、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.関数名を通して関数を実行します。
1、main.jsファイルで直接定義する方法
簡単な関数は直接main.jsファイルに書いて定義できます。

//       vue   
Vue.prototype.changeData = function (){
 alert('    ');
}

使用する時はコンポーネントから直接呼び出します。

//    this    ，  this vue    
this.changeData();

2、グローバル関数専用モジュールを使用して、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におけるグローバル変数とグローバル関数が使用するすべての内容です。まとめたものがあなたの役に立ちますように。まだよく分かりませんので、何回も見てください。頑張ってください。私たちを応援してください。