Comment personnaliser les variables globalement dans vuejs

Méthode : configurez un fichier de module de variables globales dédié. Définissez l'état initial de certaines variables dans le module, exposez-le avec "export default" et utilisez "Vue.prototype" dans "main.js" pour le monter sur le module. instance de vue ou lorsque vous avez besoin de l'utiliser ailleurs, introduisez simplement ce module.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Définir des variables globales

Principe :

Définissez un fichier de module de variables globales dédié, définissez certains états initiaux des variables dans le module, exposez-les avec la valeur par défaut d'exportation et utilisez Vue.prototype dans main.js pour les monter sur la vue exemple Ou lorsque vous avez besoin de l'utiliser ailleurs, introduisez simplement ce module.

Fichier de module de variable globale :

Fichier Global.vue :

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

Méthode d'utilisation 1 :

Référencez le fichier de module de variable globale si 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>
    <div>{{ token }}</div>
</template>

<script>
import global_ from &#39;../../components/Global&#39;//引用模块进来
export default {
 name: &#39;text&#39;,
data () {
    return {
         token:global_.token,//将全局变量赋值到data里面，也可以直接使用global_.token
        }
    }
}
</script>
<style scoped>

</style>

Méthode d'utilisation 2 :

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

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

Ensuite, il n'est 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>
    <div>{{ token }}</div>
</template>

<script>
export default {
 name: &#39;text&#39;,
data () {
    return {
         token:this.GLOBAL.token,//直接通过this访问全局变量。
        }
    }
}
</script>
<style scoped>
</style>

Vuex peut également définir des variables globales

Recommandations associées : "Tutoriel vue.js"

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!