So definieren Sie Variablen global in Uniapp

Uniapps Methode zum Definieren globaler Variablen: 1. Verwenden Sie das öffentliche Modul, der Code lautet [return obj instanceof Array] 2. Erweitern Sie einige häufig verwendete Konstanten oder Methoden direkt auf [Vue.prototype].

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Uni-App-Version 2.5.1, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

So definieren Sie globale Variablen in Uniapp:

1. Öffentliches Modul

Definieren Sie ein dediziertes Modul zum Organisieren und Verwalten dieser globalen Variablen, eingeführt am die gewünschte Seite.

Beachten Sie, dass diese Methode nur die gemeinsame Nutzung zwischen mehreren Vue-Seiten oder mehreren NVUE-Seiten unterstützt, nicht jedoch zwischen Vue und NVUE.

Das Beispiel sieht wie folgt aus:

Erstellen Sie ein gemeinsames Verzeichnis im Stammverzeichnis des Uni-App-Projekts und erstellen Sie dann eine neue helper.js im gemeinsamen Verzeichnis, um öffentliche Methoden zu definieren.

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  
}

Als nächstes verweisen Sie auf das Modul in 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>

Diese Methode ist bequemer zu pflegen, hat aber den Nachteil, dass sie jedes Mal neu eingeführt werden muss.

2. Mounten Sie Vue.prototype

Erweitern Sie einige häufig verwendete Konstanten oder Methoden direkt auf Vue.prototype, und jedes Vue-Objekt „erbt“ sie.

Beachten Sie, dass diese Methode nur Vue-Seiten unterstützt

Das Beispiel lautet wie folgt:

Mounten Sie die Eigenschaften/Methoden

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

in main.js und rufen Sie dann

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

in page/index/index.vue auf , Sie brauchen nur Sobald es in main.js definiert ist, kann es direkt auf jeder Seite aufgerufen werden.

Tipps

• Vermeiden Sie doppelte Attribut- oder Methodennamen auf jeder Seite.

• Es wird empfohlen, die auf Vue.prototype gemounteten Eigenschaften oder Methoden mit einem einheitlichen Präfix hinzuzufügen. Beispielsweise sind $url und global_url beim Lesen des Codes leicht vom Inhalt der aktuellen Seite zu unterscheiden.

3. globalData

Es gibt ein globalData-Konzept im Applet und globale Variablen können in der App deklariert werden. Vue hatte zuvor kein solches Konzept, aber uni-app führte das globalData-Konzept ein und implementierte es auf Plattformen wie H5 und App.

Sie können globalData in App.vue definieren oder die API verwenden, um diesen Wert zu lesen und zu schreiben.

• globalData unterstützt gemeinsam genutzte Vue- und NVue-Daten.

• globalData ist eine relativ einfache Möglichkeit, globale Variablen zu verwenden.

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

Die Art und Weise, globalData in js zu betreiben, ist wie folgt:

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

• 取值：console.log(getApp().globalData.text) // 'test'

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

Wenn Sie die globalData-Daten an die Seite binden müssen, können Sie sie deklarieren In der Onshow der Seite werden Variablen während des Zyklus neu zugewiesen. Ab HBuilderX 2.0.3 unterstützen NVUE-Seiten auch Onshow im Uni-App-Kompilierungsmodus.

4, Vuex

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert.

Hier ist ein Beispiel für die synchrone Aktualisierung von Benutzerinformationen nach der Anmeldung, um die Verwendung von Vuex kurz zu erläutern. Für detailliertere Vuex-Inhalte wird empfohlen, die offizielle Website von Vuex zu besuchen.

Beispiel:

Erstellen Sie ein neues Store-Verzeichnis im Stammverzeichnis des Uni-App-Projekts, erstellen Sie index.js im Store-Verzeichnis, um den Statuswert zu definieren

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 = '';  
        }  
    }  
})

Dann müssen Sie Vuex in main.js mounten

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

Schließlich in den Seiten /index/index.vue Verwenden Sie

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

Verwandte kostenlose Lernempfehlungen:

Programmiervideos🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo definieren Sie Variablen global in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!