So deklarieren Sie globale Variablen in vue.js

Die Methode zum Deklarieren globaler Variablen in vue.js: Richten Sie zunächst eine dedizierte globale Variablenmoduldatei ein und definieren Sie einige Anfangszustände der Variablen im Modul. Verwenden Sie dann den Exportstandard, um sie schließlich verfügbar zu machen [main.js] Mounten Sie es auf der Vue-Instanz und stellen Sie das Modul vor.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.9-Version. Diese Methode ist für alle Computermarken geeignet.

vue.js-Methode zum Deklarieren globaler Variablen:

Globale Variablen definieren

Prinzip: Richten Sie eine dedizierte Moduldatei für globale Variablen ein, definieren Sie einige Anfangszustände von Variablen im Modul und verwenden Sie im Wesentlichen den Exportstandard, um sie verfügbar zu machen .js Vue.prototype wird verwendet, um es auf der Vue-Instanz zu mounten. Wenn es an anderer Stelle verwendet werden muss, kann das Modul eingeführt werden.

Globale Variablenmoduldatei:

Global.vue-Datei

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

Methode 1: Verweisen Sie bei Bedarf auf die globale Variablenmoduldatei und ermitteln Sie dann den globalen Variablenparameterwert über den Variablennamen in der Datei.

    <template>
        <div>{{ token }}</div>
    </template>
     
    <script>
    import global_ from &#39;../../components/Global&#39;//引用模块进来
    export default {
     name: &#39;text&#39;,
    data () {
        return {
             token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
            }
        }
    }
    </script>
    <style scoped>
    </style>

Methode 2: Mounten Sie in der main.js-Datei am Programmeingang die obige Global.vue-Datei in 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>
    <div>{{ token }}</div>
</template>
<script>
    export default {
        name: &#39;text&#39;,
        data () {
            return {
                 token:this.GLOBAL.token,//直接通过this访问全局变量。
                }
            }
    }
</script>
<style scoped>
</style>

Verwandte kostenlose Lernempfehlungen: JavaScript(Video)

Das obige ist der detaillierte Inhalt vonSo deklarieren Sie globale Variablen in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!