Detaillierte Erläuterung der Definition globaler Variablen und globaler Funktionen im Vue-Projekt

Dieser Artikel stellt hauptsächlich vor, wie man globale Variablen und globale Funktionen im Vue-Projekt definiert. Ich hoffe, dass er jedem helfen kann.

Schreiben Sie vorne:

Wie der Titel schon sagt, müssen in Projekten einige Funktionen und Variablen häufig wiederverwendet werden, beispielsweise die Website-Serveradresse, die aus dem Hintergrund ermittelt wird : Benutzeranmeldetoken, Adressinformationen des Benutzers usw. Zu diesem Zeitpunkt müssen Sie eine Welle globaler Variablen und globaler Funktionen einrichten. Diese beiden Einstellungen sind nicht schwierig und haben möglicherweise einige Gemeinsamkeiten , also schreiben sie es einfach auf. Freunde in Not können einen Hinweis hinterlassen oder ihm folgen. Ich hoffe, er kann allen helfen.

Globale Variablen definieren

Prinzip:

Legen Sie eine dedizierte Moduldatei für globale Variablen fest, definieren Sie einige Anfangszustände von Variablen im Modul und verwenden Sie im Wesentlichen den Exportstandard, um sie verfügbar zu machen . Verwenden Sie Vue.prototype in js, um es auf der Vue-Instanz bereitzustellen, oder wenn es an anderer Stelle verwendet werden muss, führen Sie einfach dieses Modul ein.

Globale Variablenmoduldatei:

Global.vue-Datei:

<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中国钓鱼岛";
 export default
 {
  userSite,//用户地址
  token,//用户token身份
  serverSrc,//服务器地址
  hasEnter,//用户登录状态
 }
</script>

Verwendungsmethode 1:

Verweisen Sie auf das globale Variablenmodul, wo die Datei benötigt wird. Anschließend erhalten Sie den Parameterwert der globalen Variablen über den Variablennamen in der Datei.

Wird in der text1.vue-Komponente verwendet:

<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>

Verwendungsmethode 2:

Fügen Sie in der Datei main.js am Programmeingang die obige Global.vue hinzu Datei Mount auf Vue.prototype.

import global_ from './components/Global'//引用文件
  Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Dann ist es nicht erforderlich, im gesamten Projekt auf die Moduldatei Global.vue zu verweisen. Sie können dadurch direkt auf die in der Global-Datei definierten globalen Variablen zugreifen.

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 kann auch globale Variablen festlegen:

Verwenden Sie Vuex, um globale Variablen zu speichern. Hier gibt es viele Dinge, die relativ kompliziert sind. Es gibt interessierte Freunde, die die Informationen selbst überprüfen, herumspielen,

globale Funktionen definieren

Prinzip

eine neue Moduldatei erstellen und dann Vue übergeben können main.js .prototype mountet die Funktion in der Vue-Instanz und führt die Funktion über diesen Funktionsnamen aus.

1. Funktionen direkt in main.js schreiben

Einfache Funktionen können direkt in main.js geschrieben werden

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

und in der Komponente aufgerufen werden:

this.changeData();//直接通过this运行函数

2. Schreiben Sie eine Moduldatei und mounten Sie sie auf main.js.

base.js-Datei, der Dateispeicherort kann zur einfacheren Referenz auf der gleichen Ebene wie main.js platziert werden

exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
  alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
  alert('执行成功2');
  };
};

main.js-Eintragsdatei:

import base from './base'//引用
  Vue.use(base);//将全局函数当做插件来进行注册

Komponente Wird aufgerufen:

this.text1();
  this.text2();

Später

Das Obige beschreibt, wie globale Variablen und globale Funktionen definiert werden. Die globalen Variablen und globalen Funktionen sind hier nicht auf Vue-Projekte beschränkt. cli wird für die Modularisierung und andere modulare Entwicklungen mit Webpack verwendet. Die Routinen zum Definieren globaler Variablen und Funktionen sind grundsätzlich dieselben. Oben geht es nur um globale Variablen und globale Funktionen. Ich hoffe, dass die Lektüre dieses Artikels Ihnen helfen kann.

Verwandte Empfehlungen:

Globale PHP-Variablen Was sind Super-Globale Variablen?

Wie Vue globale Variablen verwendet

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Definition globaler Variablen und globaler Funktionen im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!