Comment définir des variables globales dans vue2 ? (tutoriel détaillé)-js tutoriel-php.cn

Comment définir des variables globales dans vue2 ? (tutoriel détaillé)

亚连

Libérer： 2018-05-31 15:24:56

original

3932 Les gens l'ont consulté

Je vais maintenant partager avec vous un article sur la façon de définir les variables globales de vue2. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Récemment, lors de l'apprentissage de VUE.js, des variables globales JS sont impliquées. Plutôt que d'être des variables globales de VUE, ce sont des variables globales pour le développement JS modulaire.

1. Module spécial pour les variables globales

est un module spécifique pour organiser et gérer ces variables globales. Vous pouvez importer ce module où que vous soyez. il faut bien y faire référence.

Module spécialisé pour les variables globales 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>

Copier après la connexion

Les variables du module sont exposées via l'exportation Lorsque d'autres endroits ont besoin de l'utiliser, introduisez simplement le module. mondial.

Modules qui doivent utiliser des variables globales html5.vue

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

Copier après la connexion

2. Montez le module de variable globale dans Vue.prototype.

Idem que ci-dessus pour Global.js, ajoutez le code suivant à main.js à l'entrée du programme

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

Copier après la connexion

Après le montage, dans le module qui doit référencez la variable globale, non Vous devez importer le module global et le référencer directement avec ceci, comme suit :

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

Copier après la connexion

3. Utilisez VUEX

Vuex Oui Un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application. Par conséquent, les variables globales peuvent être stockées. Parce que Vuex est un peu encombrant, cela semble excessif. Je ne pense pas que ce soit nécessaire.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.