Explication détaillée de la définition des variables globales et des fonctions globales dans le projet Vue

Cet article présente principalement comment définir des variables globales et des fonctions globales dans le projet Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.

Écrivez devant :

Comme l'indique le titre, dans les projets, certaines fonctions et variables doivent souvent être réutilisées, comme l'adresse du serveur du site Web, qui est obtenue à partir du backend : jeton de connexion de l'utilisateur, informations sur l'adresse de l'utilisateur, etc. À l'heure actuelle, vous devez configurer une vague de variables globales et de fonctions globales. Ces deux paramètres ne sont pas difficiles et ont des points communs. Certains amis n'en savent peut-être pas grand-chose. , alors ils l'écrivent simplement. Les amis dans le besoin peuvent faire une référence. Si vous l'aimez, vous pouvez l'aimer ou le suivre. 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, utiliser export default pour les exposer, dans main . Utilisez Vue.prototype dans js pour le monter sur l'instance de vue ou lorsqu'il doit être utilisé 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 :

Variables globales php Que sont les variables super globales

Partage des variables globales php et des variables super globales

Comment vue utilise les variables globales

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!