Comment définir des variables globales dans vue.js

Comment définir des variables globales dans vue.js : 1. Référencez le fichier du module de variable globale si nécessaire et obtenez la valeur du paramètre de variable globale via le nom de la variable dans le fichier 2. À l'entrée du programme [main ; .js], montez le fichier [Global.vue] sur [Vue.prototype].

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.5.2, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment définir des variables globales dans vue.js :

Principe : Définissez un fichier de module de variable globale dédié Définissez l'état initial de certaines variables dans le module, exposez-le avec la valeur d'exportation par défaut et utilisez Vue.prototype dans main.js pour le 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 1 : Référencez le fichier de module de variable globale si nécessaire, puis transmettez le Le nom de la variable dans le fichier obtient la valeur du paramètre de variable globale.

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

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

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!