Eine kurze Diskussion über den Werttransfer zwischen Vue-Komponenten (einschließlich Vuex)

<Vorlage>
    <div>
        <HALLOWELT :needData="content"></HALLOWELT>
    </div>
</Vorlage>

<Skript>
importiere HELLOWORLD aus '../components/HelloWorld.vue'
Standard exportieren {
    Komponenten: {
        HALLO WELT
    },
    Daten(){
        zurückkehren {
            Inhalt: "Inhalt"
        }
    }
}
</Skript>

<style lang="less" scoped>

</Stil>

<Vorlage>
    <div>
        <h1>HALLOWELT</h1>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Requisiten:["needData"],
    Daten(){
        zurückkehren {
            H:diese.braucheDaten,
        }
    },
    montiert(){
        konsole.log(diese.H);
    }
}
</Skript>

<style lang="less" scoped>

</Stil>

<Vorlage>
    <div>
        <HALLOWELT @sendData="getData"></HALLOWELT>
    </div>
</Vorlage>

<Skript>
importiere HELLOWORLD aus '../components/HelloWorld.vue'
Standard exportieren {
    Komponenten: {
        HALLO WELT
    },
    Daten(){
        zurückkehren {
            
        }
    },
    Methoden:{
        getData(sonData){
            Konsole.log("Daten=>",sonData);
        },
    }
}
</Skript>

<style lang="less" scoped>

</Stil>

<Vorlage>
    <div>
        <h1>HALLOWELT</h1>
    </div>
</Vorlage>

<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Inhalt: "Inhalt"
        }
    },
    montiert(){
        dies.$emit("sendData",dieser.inhalt);
    }
}
</Skript>

<style lang="less" scoped>

</Stil>

sei a={
  Zustand: {
  	Name:"ModulA"
  },
  //Mutationen werden speziell dazu verwendet, die Daten im Statusattribut Mutationen zu ändern: {
  	setFun(Zustand,Element){
		Status.Name=Artikel;
	}
  }
}

exportiere standardmäßig neuen Vuex.Store({
  //Status ist für die Speicherung von Daten reserviert. Status: {
  	Zahl: 100,
  	Komponente verwenden:{
		Name: „A“,
	},
	useBcomponent:"Inhalt",
  },
  //Mutationen werden speziell dazu verwendet, die Daten im Statusattribut Mutationen zu ändern: {
  	setStateFun(Zustand,Element){
		Zustand.useBcomponent="B-Komponente";
	}
  },
  Aktionen: {
  	httpGetData(Geschäft,Artikel){
		setzeTimeout(()=>{
			konsole.log(Element);
			store.commit("setStateFun",Artikel);
		},3000)
	}
  },
  Getter: {
  //Beim Aufruf der Funktion im Getter wird kein Parameter übergeben getterFun1(state){
		returniere state.num++
	}
  //Beim Aufruf der Funktion im Getter gibt es Eingabeparameter gettterFun2(state){
		Rückgabefunktion (Wert) {
			Rückgabewert: Zustand.num+=val;
		}
	}
  },
  Module:
  	ModulA:a
  }
});
}

Daten in diesem $store.state.state-Objekt;
Lassen Sie beispielsweise val = this.$store.state.num;

this.$store.commit("Funktionsname","Daten");
Zum Beispiel dies.$store.commit("setStateFun","testSetItem");

this.$store.dispatch("Funktionsname","Daten");
Beispielsweise this.$store.dispatch("httpGetData","testItem");

dies.$store.getters.Funktionsname;
Zum Beispiel // wenn kein Parameter eingegeben wird: this.$store.getters.getterFun1;
//Wenn ein Eingabeparameter vorhanden ist: this.$store.getters.getterFun2(123);

//Holen Sie sich die Statusdaten im Modulobjekt this.$store.state.modules Objektname.state-Wert;
Zum Beispiel this.$store.state.ModuleA.name
//Verwenden Sie die Mutationsfunktion im Modulobjekt this.$store.commit("Funktionsname","Eingabeparameterdaten");
Zum Beispiel dies.$store.commit("setFun","itemabc");
//Hier ist zu beachten, dass, wenn es im Modul Module und im externen (nicht im Modulobjektmodul) Mutationsobjekt eine Funktion mit demselben Namen gibt, beim Aufruf beide Funktionen mit demselben Namen ausgeführt werden