Implementierung einer Warenkorbfunktion basierend auf Vuex

<Vorlage>
 <div Klasse="Startseite">
 <h1>Beispiel für einen Vuex-Einkaufswagen</h1>
 <Hinzufügen-von></Hinzufügen-von>
 <Warenkorb></Warenkorb>
 </div>
</Vorlage>

<Skript>
importiere AddFrom aus „./Add.vue“
ShopCart aus „./ShopCart.vue“ importieren
// @ ist ein Alias ​​für /src
// importiere HelloWorld aus '@/components/HelloWorld.vue'
Standard exportieren {
 Name: "Home",
 Komponenten:
 HinzufügenVon,
 Warenkorb
 },

};
</Skript>
<Stil>
Tisch {
 Breite: 800px;
 Rand: 0 automatisch;
 Rand: 1px durchgezogen #ccc;
 Rahmenabstand: 0;
}
der Körper,
tbody td {
 Rand: 1px durchgezogen #ccc;
 Textausrichtung: zentriert;
}
h1{
 Textausrichtung: zentriert;
}
.hinzufügen{
 Breite: 800px;
 Rand: 0 automatisch;
}
</Stil>

<Vorlage>
 <div Klasse="Hinzufügen">
 <div Klasse="von-Gruppe">
 <label for="">Produktnummer</label>
 <input type="text" v-model="shop.id" placeholder="Bitte geben Sie die Produktnummer ein">
 </div>
 <div Klasse="von-Gruppe">
 <label für="">Produktname</label>
 <input type="text" v-model="shop.name" placeholder="Bitte geben Sie den Produktnamen ein">
 </div>
 <div Klasse="von-Gruppe">
 <label for="">Produktpreis</label>
 <input type="text" v-model="shop.price" placeholder="Bitte geben Sie den Produktpreis ein">
 </div>
 <div Klasse="von-Gruppe">
 <label for="">Menge des Produkts</label>
 <input type="text" v-model="shop.count" placeholder="Bitte geben Sie die Menge des Produkts ein">
 </div>
 <div Klasse="von-Gruppe">
 <button @click="add">Produkt hinzufügen</button>
 </div>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Hinzufügen",
 Daten() {
 zurückkehren {
 Geschäft:{}
 };
 },
 Methoden:{
 hinzufügen(){
 
 dies.$store.dispatch("addShopList",dieser.shop)
 dieser.shop = {
 Ausweis:"",
 Name:"",
 Preis:"",
 zählen:""
 }
 }
 }
};
</Skript>

<Stilbereich>
 .hinzufügen{
 Breite: 800px;
 Textausrichtung: zentriert;
 }
</Stil>

<Vorlage>
 <div Klasse="Shop-Cart">

 <Tabelle>
 <thead-Grenze>
 <tr>
  <th>Produktnummer</th>
  <th>Produktname</th>
  <th>Produktpreis</th>
  <th>Warenmenge</th>
  <th>Zwischensumme</th>
  <th>Betrieb</th>
 </tr>
 </thead>
 <tbody v-if="shop.length > 0">
 <tr v-for="(i, e) im Shop" :key="e">
  <td>{{ ich.id }}</td>
  <td>{{ i.name }}</td>
  <td>{{ i.preis }}</td>
  <td>
  <button @click="Hinzufügen(e)">+</button>
  <Eingabetyp="Text" v-Modell="i.Anzahl" />
  <button @click="löschen(e)">-</button>
  </td>
  <td>￥{{ i.Preis * i.Anzahl }}</td>
  <td><button @click="del(e)">Löschen</button></td>
 </tr>
 </tbody>
 <tfuß>
 <tr>
  <td colspan="6" align="right">Gesamt: {{ total }}</td>
  <button @click="clear">Warenkorb leeren</button>
 </tr>
 </tfoot>
 </Tabelle>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: 'Shop-Cart',
 Komponenten: {},
 Daten() {
 zurückkehren {};
 },
 berechnet: {
 Geschäft() {
 gib dies zurück.$store.getters.getlist;
 },
 insgesamt() {
 gib dies zurück.$store.getters.getShopTotal;
 }
 },
 Methoden: {
 del(e) {
 // dies.$store.dispatch()
 dies.$store.dispatch('remoteList', e);
 },

 hinzufügen(e) {
 dies.$store.dispatch('addList', e);
 },
 löschen(e) {
 this.$store.dispatch('deleteList', e);
 },

 klar() {
 dies.$store.dispatch('clearList', []);
 }
 }
};
</Skript>

Vue von „vue“ importieren
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)


exportiere standardmäßig neuen Vuex.Store({
 Zustand: {
 Liste: [{
 ID: 1,
 Name: "Wow, haha",
 Preis: 3,
 Anzahl: 0
 },
 {
 ID: 2,
 Name: "Wowhaha",
 Preis: 3,
 Anzahl: 0
 }
 ]
 },
 Getter: {
 //Warenkorbdaten abrufen getlist(state) {
 Statusliste zurückgeben
 },
 //Gesamtpreis des Produkts getShopTotal(state,index) {
 lass Ergebnis = 0;
 Zustand.Liste.fürJeden((Element, Index) => {
 Ergebnis += Artikelpreis * Artikelanzahl
 })
 Ergebnis zurückgeben
 },
 },
 Mutationen:
 //Einzelne Daten im Warenkorb löschen remoteList(state,index) {
 Zustand.Liste.splice(Index, 1);
 console.log("aaa",Status)
 },
 //Anzahl der Produkte erhöhen addList(state, index) {
 Zustand.Liste[Index].Anzahl++;
 },
 //Anzahl der Produkte verringern deleteList(state, index) {
 Staat.Liste[Index].Anzahl--;
 wenn(Staat.Liste[Index].Anzahl<=0){
 Zustand.Liste[Index].Anzahl = 0
 zurückkehren ;
 }
 },

 // Einkaufswagen leeren clearList(state, arr) {
 Zustand.Liste = arr
 },
 addShopList(Bundesland,Geschäft){
 Zustand.Liste.Push(Shop)
 }
 },
 //Verwende Aktionen, um Mutationsmethodenaktionen aufzurufen: {
 Remote-Liste ({
 begehen
 }, Index) {
 commit("entfernteListe", index)
 },
 Liste hinzufügen({
 begehen
 }, Index) {
 commit("Liste hinzufügen", index)
 },
 Liste löschen({
 begehen
 }, Index) {
 commit("Liste löschen", index)
 },
 Liste löschen({
 begehen
 }, arr) {
 commit("Liste löschen", arr)
 },
 addShopList({commit},shop){
 commit("ShopList hinzufügen",shop)
 }
 },
 Module: {}
})