Detaillierte Erläuterung verschiedener Methoden zur Definition globaler Variablen in VUE-js-Tutorial-php.cn

Detaillierte Erläuterung verschiedener Methoden zur Definition globaler Variablen in VUE

黄舟

Freigeben： 2017-07-24 13:37:35

Original

4123 Leute haben es durchsucht

In letzter Zeit sind beim Erlernen von VUE.js globale JS-Variablen beteiligt. Dabei handelt es sich nicht so sehr um die globalen Variablen von VUE, sondern vielmehr um die globalen Variablen der modularen JS-Entwicklung.

1. Spezielles Modul für globale Variablen

verwendet ein spezielles Modul, um diese globalen Variablen zu organisieren und zu verwalten.

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>

Nach dem Login kopieren

Variablen im Modul werden durch Export verfügbar gemacht. Wenn sie an anderer Stelle verwendet werden 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">
   <div 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>
   </div>
  </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>

Nach dem Login kopieren

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

Global.js ist das gleiche wie oben. Fügen Sie den folgenden Code zu main.js am Programmeingang hinzu

import global_ from &#39;./components/tool/Global&#39;
Vue.prototype.GLOBAL = global_

Nach dem Login kopieren

Nach dem Mounten ist es nicht erforderlich, das globale Modul in zu importieren Modul, das auf die globale Variable verweisen muss, können Sie es wie folgt direkt zitieren:

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

Nach dem Login kopieren

3. Verwenden Sie VUEX

Vuex ist ein speziell für Vue entwickeltes Zustandsverwaltungsmodell .js-Anwendungen. 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.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung verschiedener Methoden zur Definition globaler Variablen in VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!