Wie lege ich globale Variablen in vue2 fest? (ausführliches Tutorial)

Jetzt werde ich einen Artikel über das Festlegen globaler Vue2-Variablen mit Ihnen teilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.

In letzter Zeit sind beim Erlernen von VUE.js globale JS-Variablen beteiligt, anstatt globale Variablen von VUE zu sein, sondern globale Variablen für die modulare JS-Entwicklung.

1. Spezialmodul für globale Variablen

ist ein spezielles Modul zum Organisieren und Verwalten dieser globalen Variablen Ich muss darauf verweisen.

Spezielles Modul für globale Variablen Global.vue

<script type="text/javascript">
const colorList = [
 &#39;#F9F900&#39;,
 &#39;#6FB7B7&#39;,
 &#39;#9999CC&#39;,
 &#39;#B766AD&#39;,
 &#39;#B87070&#39;,
 &#39;#FF8F59&#39;,
 &#39;#FFAF60&#39;,
 &#39;#FFDC35&#39;,
 &#39;#FFFF37&#39;,
 &#39;#B7FF4A&#39;,
 &#39;#28FF28&#39;,
 &#39;#1AFD9C&#39;,
 &#39;#00FFFF&#39;,
 &#39;#2894FF&#39;,
 &#39;#6A6AFF&#39;,
 &#39;#BE77FF&#39;,
 &#39;#FF77FF&#39;,
 &#39;#FF79BC&#39;,
 &#39;#FF2D2D&#39;,
 &#39;#ADADAD&#39;
]
const colorListLength = 20
function getRandColor () {
 var tem = Math.round(Math.random() * colorListLength)
 return colorList[tem]
}
export default
{
 colorList,
 colorListLength,
 getRandColor
}
</script>

Variablen im Modul werden durch Export verfügbar gemacht, wenn andere Orte es verwenden müssen, führen Sie einfach das Modul global ein.

Module, die globale Variablen html5.vue verwenden müssen

<template>
 <ul>
  <template v-for="item in mainList">
   <p class="projectItem" :style="&#39;box-shadow:1px 1px 10px &#39;+ getColor()">
     <router-link :to="&#39;project/&#39;+item.id">
      ![](item.img)
      <span>{{item.title}}</span>
     </router-link>
   </p>
  </template>
 </ul>
</template>
<script type="text/javascript">
import global_ from &#39;components/tool/Global&#39;
export default {
 data () {
  return {
   getColor: global_.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>
<style scoped type="text/css">
.projectItem
{
 margin: 5px;
 width: 200px;
 height: 120px;
 /*border:1px soild;*/
 box-shadow: 1px 1px 10px;
}
.projectItem a
{
 min-width: 200px;
}
.projectItem a span
{
 text-align: center;
 display: block;
}
</style>

2. Hängen Sie das globale Variablenmodul in Vue.prototype ein.

Dasselbe wie oben für Global.js, fügen Sie den folgenden Code zu main.js am Programmeingang hinzu

import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_

Nach dem Mounten in den Modulen, die auf global verweisen müssen Variablen ist es nicht erforderlich, das globale Modul zu importieren und direkt damit zu referenzieren:

<script type="text/javascript">
export default {
 data () {
  return {
   getColor: this.GLOBAL.getRandColor,
   mainList: [
    {
     id: 1,
     img: require(&#39;../../assets/rankIcon.png&#39;),
     title: &#39;登录界面&#39;
    },
    {
     id: 2,
     img: require(&#39;../../assets/rankIndex.png&#39;),
     title: &#39;主页&#39;
    }
   ]
  }
 }
}
</script>

3. Verwenden Sie VUEX

Vuex ist ein Tool, das für Vue State-Verwaltungsmuster für die .js-Anwendungsentwicklung entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten. Daher können globale Variablen gespeichert werden. Da Vuex etwas umständlich ist, fühlt es sich übertrieben an. Ich denke nicht, dass es notwendig ist.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispiele für dynamische Routing-Umleitung und Navigationsschutz von Vue

Beispiel für die JS-Implementierung des Hinzufügens von Ereignisoperationen für dynamisch erstellte Elemente

Einführung in die Aufrufsequenz von Funktionen in Vue

Das obige ist der detaillierte Inhalt vonWie lege ich globale Variablen in vue2 fest? (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!