Detaillierte Erklärung der globalen Variablenimplementierung von Uniapp

  //Synchronisierter Speicher uni.setStorageSync("Schlüssel","Wert")
  //Synchronisierter Erwerb let value = uni.getStorageSync("key")  
  console.log("Ich werde warten, bis das oben genannte abgeschlossen ist, bevor ich es ausführe)

  uni.setStorage({
   Schlüssel: "Schlüssel",
    Daten: „Wert“,
    Erfolg:Funktion(){
      //Speicherrückruf erfolgreich console.log("Ich bin der Rückruf des asynchronen Speichers, ich werde ausgeführt, nachdem val deklariert wurde")
    }
  })
  let val = 1 //Diese Zeile führt zuerst uni.getStorage({
   Schlüssel: "Schlüssel",
    Erfolg:Funktion(res){
      //Erfolgreichen Rückruf speichern console.log("Ich bin der asynchron erhaltene Rückruf, ich werde ausgeführt, nachdem val2 deklariert wurde")
    }
  })
  let val2 = 2 // Diese Zeile wird zuerst ausgeführt

  //Beispielsweise haben wir in config.js einen Basisdomänennamen exportiert export default {
   baseUrl:"http://www.test.com"
  }

  //Führen Sie diese Datei durch Import ein import config von "../common/config.js"
  Standard exportieren {
    beim Laden(){
     console.log(config.baseUrl)//baseUrl:"http://www.test.com"
    }
  }

  //Die Datei config.js bezieht sich hier auf die Datei, die bereits oben geschrieben wurde: import config from "./common/config.js"
  // Mounten Sie baseUrl in Vue, und dann können Sie über this.baseUrl in Seiten und Komponenten darauf zugreifen. Vue.prototype.baseUrl = config.baseUrl

<Vorlage>
 <!-- Der Wert ist im WeChat-Applet nicht definiert, auf anderen Terminals gültig-->
 <Ansicht>
 Der Wert ist: {{this.baseUrl}}
 </Ansicht>
</Vorlage>

<Skript>
 Standard exportieren {
 beim Laden() {
    console.log(diese.baseUrl)//"http://www.test.com"
 }
 }
</Skript>

  Standard exportieren{
   //GlobalData muss in App.vue definiert werden
   globalData:{
     Benutzername: „Bai Juyi“
    },
    //Beachten Sie hier, dass Sie getApp().globalData.Name nicht direkt verwenden können, wenn Sie globalData in App.vue verwenden möchten, da getApp() zu diesem Zeitpunkt noch nicht generiert wurde // 1. Nicht-V3-Modus, Sie können es über this.$scope.globalData erhalten // 2. V3-Modus, Sie können es über getApp({allowDefault: true}).globalData onLaunch(){ erhalten.
     Konsole.log(dies.$scope.globalData.Benutzername)
    }
  }

<Vorlage>
 <Ansicht>
 <Ansicht>
  <!-- Beachten Sie, dass getApp().globalData.userName nicht direkt in der Vorlage verwendet werden kann -->
  Der Autor von <<The Charcoal Seller>> ist: {{author}}
 </Ansicht>
 <Ansicht>
  <u-button @click="modifyUserName">Benutzernamenwert ändern</u-button>
 </Ansicht>
 </Ansicht>
</Vorlage>

<Skript>
 Standard exportieren {
 Daten() {
  zurückkehren {
  Autor: ''
  }
 },
 beiAnzeigen() {
  // Jedes Mal, wenn A.vue auf dem Bildschirm erscheint, wird onShow ausgelöst und somit der Autorwert aktualisiert. this.author = getApp().globalData.userName;
 },
 Methoden: {
  Benutzername ändern() {
                //Der Wert von globalData wird zu diesem Zeitpunkt geändert getApp().globalData.userName = "Benutzername";
  // Nach dem Ändern von userName wird der Autor dieser Seite immer noch nicht automatisch aktualisiert, da globalData nicht reagiert. // Wir müssen den Autorwert dieser Seite immer noch manuell aktualisieren, was die Nachteile von globalData zeigt this.author = getApp().globalData.userName;
  }
 }
 }
</Skript>

//index.js
  Vue von „vue“ importieren
  Vuex von „vuex“ importieren
  Vue.Verwenden(Vuex)
  const store = neuer Vuex.Store({
   Zustand:{
     vuex_token:"123456"
    },
    //Methoden zum synchronen Ändern des Werts bei Statusmutationen:{
     //Payload ist ein Parameter, der übergeben wird, wenn der Benutzer Mutationen verwendet. Es kann ein einzelner Wert oder ein Objekt sein modifyToken(state,payload){
       Zustand.vuex_token = Nutzlast.token
      }
    }
  })
  Standardspeicher exportieren

Store aus „@/store“ importieren;

//Den Store in die Vue-Objekterstellung einfügen const app = new Vue({
 speichern,
 ...App
})

<Vorlage>
 <Ansicht>
 <Ansicht>
  Der Token-Wert beträgt {{vuex_token}}
 </Ansicht>
 <u-button @click="btnClick">vuex_token ändern</u-button>
 </Ansicht>
</Vorlage>

<Skript>
//Dies ist die von Vue bereitgestellte API, um die Verwendung des Stores zu vereinfachen. Weitere Informationen finden Sie in der offiziellen Vue-Dokumentation import {mapState, mapMutations} from 'vuex'; 
Standard exportieren {
 berechnet: { 
 ...mapState(['vuex_token']) 
 }, 
 Methoden: { 
 ...mapMutations(['modifiziertes Token']),
 btnClick() {
  // Der zweite Parameter kann hier eine normale Variable oder ein Objekt sein, das angepasst und gemäß den Mutationsanforderungen verarbeitet wird (ohne Verwendung von mapMutations).
  dies.$store.commit('modifyToken', {token: 'xxxyyyzzz'}
            //Verwenden von mapMutations this.modifyToken({token: 'xxxyyyzzz'})
 }
 } 
}
</Skript>

// Vuex einführen, vue Vuex verwenden, dieser Schritt unterscheidet sich nicht von der allgemeinen Verwendung von vuex import Vue from 'vue'
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)

//Erstellen Sie eine Variable zum Speichern von Daten, die dauerhaft gespeichert werden müssen. let lifeData = {};

versuchen{
  // Versuchen Sie herauszufinden, ob die Variable lifeData lokal vorhanden ist. Beim ersten Start der App ist sie nicht vorhanden. lifeData = uni.getStorageSync('lifeData');
}fangen(e){
 
}

// Muss dauerhaft gespeichert und beim nächsten Start der App abgerufen werden, der Variablenname im Status let saveStateKeys = ['vuex_user', 'vuex_token'];

// Variablen im lokalen Speicher speichern (kein Verlust beim Aktualisieren/Neustarten (App wird nicht aktualisiert, App wird nur neu gestartet))
const saveLifeData = Funktion(Schlüssel, Wert){
 // Bestimmen Sie, ob der Variablenname im zu speichernden Array enthalten ist // Hiermit wird bestimmt, ob der Variablenname in saveStateKeys gespeichert ist. Speichern Sie ihn dann zur dauerhaften Speicherung in lifeData. Andernfalls entspricht dies der allgemeinen Vuex-Speichermethode if (saveStateKeys.indexOf(key) != -1) {
 // Holen Sie das lokal gespeicherte lifeData-Objekt und fügen Sie die Variable zum Objekt hinzu let tmp = uni.getStorageSync('lifeData');
 // Wenn Sie die App zum ersten Mal öffnen, ist keine Variable „lifeData“ vorhanden. Geben Sie daher ein leeres Objekt vom Typ {} ein: tmp = tmp ? tmp : {};
 tmp[Schlüssel] = Wert;
 // Nach der Ausführung dieses Schritts werden alle zu speichernden Variablen im lokalen lifeData-Objekt gemountet uni.setStorageSync('lifeData', tmp);
 }
}
const store = neuer Vuex.Store({
 // Die folgenden Werte sind nur Beispiele, bitte löschen Sie sie während des Nutzungszustands: {
 // Wenn es unter dem oben lokal abgerufenen lifeData-Objekt ein entsprechendes Attribut gibt, weisen Sie es der entsprechenden Variable im Status zu // Durch Hinzufügen des Präfixes vuex_ werden Variablennamenkonflikte vermieden und auf einen Blick klar ersichtlich // Die dauerhaft gespeicherten Daten werden von lifeData abgerufen, da lifeData bereits lokal gespeichert ist vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
 vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 // Wenn vuex_version nicht im lokalen permanenten Speicher gespeichert werden muss, ist die Methode lifeData.vuex_version nicht erforderlich vuex_version: '1.0.1',
 },
 Mutationen:
 $uStore(Status, Nutzlast) {
            //Payload ist das Objekt, das übergeben wird, wenn this.$u.vuex später aufgerufen wird //wie this.$u.vuex("user.info.score","jack") payload = {name:"user.info.score",value:"jack"}
  // Bestimmen Sie, ob es sich um einen mehrstufigen Aufruf handelt und das Objekt im Status vorhanden ist, z. B. user.info.score = 1
  let nameArr = payload.name.split('.');//[Benutzer, Info, Punktzahl]
  lass saveKey = '';
  lass len = nameArr.length;
  wenn(nameArr.length >= 2) {
  let obj = Zustand[nameArr[0]];
  für(lass i = 1; i < len - 1; i++) {
   obj = obj[nameArr[i]]; // Zu diesem Zeitpunkt ist obj user.info, natürlich sind es immer noch leere Daten}
                //nameArr[len-1] ist der Score, obj[nameArr[len - 1]] ist gleichbedeutend mit user.info.score
  obj[nameArr[Länge - 1]] = Nutzlast.Wert;
  speichernSchlüssel = nameArr[0];
  } anders {
  // Einstufige Variable, falls „state“ eine normale Variable ist state[payload.name] = payload.value;
  Schlüssel speichern = Nutzlast.Name;
  }
  // Variablen lokal speichern, siehe oberste Funktionsdefinition saveLifeData(saveKey, state[saveKey])
 }
 }
})
Standardspeicher exportieren

//mixin.js
importiere { mapState } von 'vuex'
Store aus "@/store" importieren

// Versuchen Sie, alle Statusvariablen des Vuex des Benutzers in store/index.js im Stammverzeichnis in globale Variablen zu laden. let $uStoreKey = [];
versuchen{
 $uStoreKey = store.state ? Objekt.keys(store.state) : [];
}fangen(e){
 
}

modul.exporte = {
 erstellt() {
 //Hängen Sie die Vuex-Methode an this.$u //Verwendungsmethode: Wenn Sie die Variable user.name im Vuex-Status in „epic“ ändern möchten => this.$u.vuex('user.name', 'epic')
 // Wenn Sie die Versionsvariable des Vuex-Status auf 1.0.1 ändern möchten => this.$u.vuex('version', '1.0.1')
 dies.$u.vuex = (Name, Wert) => {
  dies.$store.commit('$uStore', {
  Name,Wert //Erinnerst du dich an die von $uStore übergebene Nutzlast? haha 
  })
 }
 },
 berechnet: {
 // Dekonstruiere alle Variablen im Status von Vuex in den globalen Mixin … mapState($uStoreKey)
 }
}

//main.js
vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

//main.js
Store aus „@/store“ importieren;

//Den Store in die Vue-Objekterstellung einfügen const app = new Vue({
 speichern,
 ...App
})