Definieren Sie globale Variablen und globale Funktionsmethoden im Vue-Projekt

In Projekten müssen einige Funktionen und Variablen häufig wiederverwendet werden, z. B. die Website-Serveradresse, die aus dem Hintergrund abgerufen wird: das Anmeldetoken des Benutzers, die Adressinformationen des Benutzers usw. Derzeit gibt es eine globale Welle Variablen und globale Funktionen, diese beiden Einstellungen sind nicht allzu schwierig und einige Freunde wissen möglicherweise nicht viel darüber. In diesem Artikel wird hauptsächlich die Definition globaler Variablen und globaler Funktionen im Vue-Projekt vorgestellt Referenz. Interessierte Freunde können darauf verweisen, ich hoffe, es kann allen helfen.

Globale Variablen definieren

Prinzip:

Legen Sie eine dedizierte globale Variablenmoduldatei fest, definieren Sie einige Anfangszustände von Variablen im Modul und verwenden Sie zum Offenlegen den Exportstandard Verwenden Sie Vue.prototype in main.js, um es auf der Vue-Instanz bereitzustellen, oder wenn Sie es anderswo verwenden müssen, 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. Interessierte Freunde können die Informationen selbst überprüfen, herumspielen,

globale Funktionen definieren

Prinzip

eine neue Moduldatei erstellen und dann Vue in main übergeben .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 Speicherort der Datei kann zur leichteren 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:

Über die verschiedenen Unterscheidungen zwischen globalen Variablen global und $GLOBALS in PHP - WORSHIP Asa

Globale PHP-Variablen Was sind superglobale Variablen?

So verwenden Sie globale Variablen in Vue

Das obige ist der detaillierte Inhalt vonDefinieren Sie globale Variablen und globale Funktionsmethoden im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!