Comment définir des variables globalement dans Uniapp

Comment uniapp définit les variables globales : 1. Utilisez un module public, le code est [return obj instanceof Array] 2. Étendez directement certaines constantes ou méthodes fréquemment utilisées à [Vue.prototype] ;

L'environnement d'exploitation de ce tutoriel : système windows7, version uni-app2.5.1, ordinateur Dell G3. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé (gratuit) : Tutoriel de développement uni-app

Comment définir des variables globales dans uniapp :

1. Le module public

définit un module dédié pour organiser et gérer ces variables globales et les introduire sur les pages requises.

Notez que cette méthode ne prend en charge que le partage entre plusieurs pages vue ou plusieurs pages nvue, mais pas entre vue et nvue.

L'exemple est le suivant :

Créez un répertoire commun dans le répertoire racine du projet uni-app, puis créez un nouveau helper.js dans le répertoire commun pour définir les méthodes publiques.

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  
export default {  
    websiteUrl,  
    now,  
    isArray  
}

Ensuite, référencez le module dans pages/index/index.vue

<script>  
    import helper from &#39;../../common/helper.js&#39;;  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(&#39;now:&#39; + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

Cette méthode est plus pratique à maintenir, mais l'inconvénient est qu'elle doit être introduite à chaque fois.

2. Montez Vue.prototype

Étendez certaines constantes ou méthodes fréquemment utilisées directement à Vue.prototype, et chaque objet Vue "" héritera ".

Notez que cette méthode ne prend en charge que les pages vue

L'exemple est le suivant :

Monter les propriétés/méthodes dans main.js

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};

Puis dans les pages / Cette méthode d'appel de

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log(&#39;now:&#39; + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

dans index/index.vue n'a besoin d'être définie que dans main.js et peut être appelée directement dans chaque page.

Conseils

• Ne pas avoir de noms d'attributs ou de méthodes en double dans chaque page.

• Il est recommandé que les attributs ou méthodes montés sur Vue.prototype puissent être ajoutés avec un préfixe unifié. Par exemple, $url et global_url sont faciles à distinguer du contenu de la page actuelle lors de la lecture du code.

3. globalData

Il existe un concept de globalData dans l'applet, et des variables globales peuvent être déclarées sur l'application. Vue n'avait pas ce genre de concept auparavant, mais uni-app a introduit le concept globalData et l'a implémenté sur des plates-formes telles que H5 et App.

Vous pouvez définir globalData dans App.vue, ou vous pouvez utiliser l'API pour lire et écrire cette valeur.

• globalData prend en charge le partage de données vue et nvue.

• globalData est un moyen relativement simple d'utiliser des variables globales.

Définition : App.vue

<script>  
    export default {  
        globalData: {  
            text: &#39;text&#39;  
        },  
        onLaunch: function() {  
            console.log(&#39;App Launch&#39;)  
        },  
        onShow: function() {  
            console.log(&#39;App Show&#39;)  
        },  
        onHide: function() {  
            console.log(&#39;App Hide&#39;)  
        }  
    }  
</script>  
<style>  
    /*每个页面公共css */  
</style>

La façon d'exploiter globalData en js est la suivante :

• Affectation : getApp().globalData.text = 'test'

• Valeur : console.log(getApp().globalData.text) // 'test'

Si vous devez lier les données globalData au page, les variables peuvent être réaffectées dans le cycle de déclaration onshow de la page. À partir de HBuilderX 2.0.3, les pages nvue prennent également en charge onshow en mode compilation uni-app.

4. Vuex

Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible.

Voici un exemple de mise à jour synchrone des informations utilisateur après la connexion pour expliquer brièvement l'utilisation de Vuex. Pour un contenu Vuex plus détaillé, il est recommandé d'aller sur son site officiel Vuex pour en savoir plus.

Exemple :

Créez un nouveau répertoire de magasin dans le répertoire racine du projet uni-app, créez index.js dans le répertoire du magasin pour définir la valeur d'état

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

Ensuite, vous devez créer un nouveau répertoire de magasin dans le répertoire principal. .js mount Vuex

import store from './store'  
Vue.prototype.$store = store

Enfin, utilisez

<script>  
    import {  
        mapState,  
        mapMutations  
    } from &#39;vuex&#39;;  
    export default {  
        computed: {  
            ...mapState([&#39;avatarUrl&#39;, &#39;login&#39;, &#39;userName&#39;])  
        },  
        methods: {  
            ...mapMutations([&#39;logout&#39;])  
        }  
    }  
</script>

dans pages/index/index.vue Apprentissage gratuit associé. recommandations : Vidéo de programmation

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!