ホームページ > 記事 > ウェブフロントエンド > Vueプロジェクトでのグローバル変数とグローバル関数の定義の詳細な説明

Vueプロジェクトでのグローバル変数とグローバル関数の定義の詳細な説明

小云云オリジナル: 2018-01-20 17:13:412116ブラウズ

この記事は主に Vue プロジェクトでグローバル変数とグローバル関数を定義する方法を紹介しています。興味のある方はぜひ参考にしてください。

前に書きます:

タイトルにあるように、プロジェクトでは、バックグラウンドから取得される Web サイトのサーバーアドレスなど、一部の関数と変数を再利用する必要があることがよくあります: ユーザーのログイントークン、ユーザーのアドレス情報など。この時点では、グローバル変数とグローバル関数をセットアップする必要があります。これら 2 つの設定は難しくなく、いくつかの共通点があるので、これについてはあまり知らないかもしれないので、書き留めて共有しました。それ。困っている友達は参考にしていただければいいねやフォローしていただけると幸いです。

グローバル変数を定義する

原則:

専用のグローバル変数モジュールファイルを設定し、モジュール内の変数のいくつかの初期状態を定義し、それらをエクスポートデフォルトで公開し、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>
  <p>{{ token }}</p>
</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 モジュールファイルを参照する必要がなく、これを通じて Global ファイルに定義されたグローバル変数に直接アクセスできます。

text2.vue:

<template>
  <p>{{ token }}</p>
</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.function 名を通じて関数を実行します。

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 を使用します。グローバル変数と関数を定義するルーチンは基本的に同じです。。上記はグローバル変数とグローバル関数についてのみ説明したので、この記事を読んで少しでもお役に立てれば幸いです。

Vueプロジェクトでのグローバル変数とグローバル関数の定義の詳細な説明

関連記事