Définir des variables globales et des méthodes de fonction globales dans le projet vue

Dans les projets, certaines fonctions et variables doivent souvent être réutilisées, comme l'adresse du serveur du site Web, qui est obtenue en arrière-plan : le jeton de connexion de l'utilisateur, les informations d'adresse de l'utilisateur, etc. variables et fonction globale, ces deux paramètres ne sont pas trop difficiles, et ils ont des points communs. Certains amis n'en savent peut-être pas grand-chose. Cet article présente principalement comment définir des variables globales et des fonctions globales dans le projet Vue, qui a certaines caractéristiques. référence. Valeur, les amis intéressés peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Définir des variables globales

Principe :

Définir un fichier de module de variables globales dédié, définir certains états initiaux des variables dans le module et utiliser l'exportation par défaut pour exposer Utilisez-les. Utilisez Vue.prototype dans main.js pour le monter sur l'instance de vue ou lorsque vous avez besoin de l'utiliser ailleurs, introduisez simplement ce module.

Fichier du module de variable globale :

Fichier Global.vue :

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

Méthode d'utilisation 1 :

Référencer le module de variable globale là où le fichier est nécessaire, puis obtenez la valeur du paramètre de variable globale via le nom de la variable dans le fichier.

Utilisé dans le composant text1.vue :

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

Méthode d'utilisation 2 :

Dans le fichier main.js à l'entrée du programme, ajoutez le Global.vue ci-dessus fichier Monter sur Vue.prototype.

import global_ from './components/Global'//引用文件
  Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

Il n'est alors pas nécessaire de référencer le fichier du module Global.vue dans l'ensemble du projet. Vous pouvez accéder directement aux variables globales définies dans le fichier Global via cela.

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 peut également définir des variables globales :

Utilisez vuex pour stocker des variables globales. Il y a beaucoup de choses ici et elles sont relativement compliquées. Il y a des amis qui sont intéressés et qui peuvent vérifier les informations par eux-mêmes, jouer,

définir les fonctions globales

principe

créer un nouveau fichier de module, puis passer Vue dans main .js .prototype monte la fonction sur l'instance Vue et exécute la fonction via le nom this.function.

1. Écrivez des fonctions directement dans main.js

Des fonctions simples peuvent être écrites directement dans main.js

Vue.prototype.changeData = function (){//changeData是函数名
 alert('执行成功');
}

et appelées dans le composant :

this.changeData();//直接通过this运行函数

2. Écrivez un fichier de module et montez-le sur main.js.

fichier base.js, l'emplacement du fichier peut être placé au même niveau que main.js pour une référence facile

exports.install = function (Vue, options) {
  Vue.prototype.text1 = function (){//全局函数1
  alert('执行成功1');
  };
  Vue.prototype.text2 = function (){//全局函数2
  alert('执行成功2');
  };
};

fichier d'entrée main.js :

import base from './base'//引用
  Vue.use(base);//将全局函数当做插件来进行注册

composant Appelé à l'intérieur :

this.text1();
  this.text2();

Plus tard

Ce qui précède explique comment définir les variables globales et les fonctions globales ici ne se limitent pas aux projets vue vue-. cli est utilisé. En utilisant Webpack pour la modularisation et d'autres développements modulaires, les routines de définition des variables et des fonctions globales sont fondamentalement les mêmes. Ce qui précède concerne uniquement les variables globales et les fonctions globales. J'espère que la lecture de cet article pourra vous aider.

Recommandations associées :

À propos des différentes distinctions entre les variables globales global et $GLOBALS en PHP - WORSHIP Asa

Variables globales php Que sont les super variables globales

Comment utiliser les variables globales dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!