vue プロジェクトでグローバル変数とグローバル関数メソッドを定義する-jsチュートリアル-php.cn

vue プロジェクトでグローバル変数とグローバル関数メソッドを定義する

小云云

リリース： 2018-01-03 13:30:40

オリジナル

2552 人が閲覧しました

プロジェクトでは、バックエンドから取得される Web サイトのサーバーアドレス (ユーザーのログイントークン、ユーザーのアドレス情報など) など、一部の関数や変数を再利用する必要があることがよくあります。現時点では、グローバル変数と変数が大量に登場しています。グローバル関数を設定する必要がありますが、これら 2 つの設定はそれほど難しくなく、共通点があるので、この記事では主に Vue プロジェクトでグローバル変数とグローバル関数を定義する方法を紹介します。一定の参考値がありますので、興味のある方は参考にしていただければ幸いです。

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

原則:

専用のグローバル変数モジュールファイルを設定し、モジュール内の変数のいくつかの初期状態を定義し、それらをエクスポートデフォルトで公開し、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 を使用します。グローバル変数と関数を定義するルーチンは基本的に同じです。。上記はグローバル変数とグローバル関数についてのみ説明したので、この記事を読んで少しでもお役に立てれば幸いです。