Comment déclarer des variables globales dans vue.js

La méthode de déclaration des variables globales dans vue.js : configurez d'abord un fichier de module de variables globales dédié, et définissez certains états initiaux des variables dans le module ; puis utilisez export default pour les exposer enfin ; .js] dans [main.js] Vue.prototype] est monté sur l'instance de vue et le module est introduit.

L'environnement d'exploitation de ce tutoriel : Système Windows 7, vue version 2.9. Cette méthode convient à toutes les marques d'ordinateurs.

Méthode Vue.js de déclaration des variables globales :

Définir les variables globales

Principe : Configurer un fichier de module de variables globales dédié à l'intérieur du module Définir l'état initial de certaines variables, exposez-les avec l'export par défaut et utilisez Vue.prototype dans main.js pour les monter sur l'instance de vue ou lorsque vous devez les 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 obtenez-le via le nom de la variable dans le fichier 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!