Vuex implementiert einfache Warenkorbfunktion

 <Vorlage>
    <div>
        <h1>vuex-shopWarenkorb</h1>
        <div Klasse="shop-listbox">
            <Shop-Liste />
        </div>
        <h2>Ausgewählte Produkte</h2>
        <div Klasse="shop-cartbox">
            <Warenkorb />
        </div>
    </div>
</Vorlage>

<Skript>
importiere shoList aus './shop-list'
importiere shopCart aus './shop-cart'

Standard exportieren {
  Name: 'Shop',
  Komponenten:
      'Shop-Liste': shoList,
      'Warenkorb': Einkaufswagen
  }
}
</Skript>

<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
</Stil>

 <Vorlage>
    <div Klasse="Shop-Liste">
        <Tabelle>
            <tr class="shop-listtitle">
                <td>Ich würde</td>
                <td>Name</td>
                <td>Preis</td>
                <td>Betrieb</td>
            </tr>
            <tr v-for = "Artikel in Shopliste" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{Artikelname}}</td>
                <td>{{Artikelpreis}}</td>
                <td>
                    <button @click="addToCart(item)">Zum Warenkorb hinzufügen</button>
                </td>
            </tr>
        </Tabelle>
    </div>
</Vorlage>

<Skript>
importiere {mapGetters,mapActions} aus "vuex";
Standard exportieren {
    Name: "Shopliste",
    berechnet: {
        ...mapGetters({
                shopList:'getShopList',
            })
    },
    Methoden: {
        ...mapActions(['zum Warenkorb hinzufügen'])
    },
}
</Skript>

 <Vorlage>
    <div Klasse="Shop-Liste">
        <Tabelle>
            <tr class="shop-listtitle">
                <td>Ich würde</td>
                <td>Name</td>
                <td>Preis</td>
                <td>Menge</td>
                <td>Betrieb</td>
            </tr>
            <tr v-for="Artikel in Warenkorbdaten" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{Artikelname}}</td>
                <td>{{Artikelpreis}}</td>
                <td>{{Artikelnummer}}</td>
                <td><button class="shop-dele dele-btn" @click="deleteShop(item)">Löschen</button></td>
            </tr>
            <tr v-if="cartData.length <= 0">
                <td colspan="5">Keine Daten</td>
            </tr>
            <tr>
                <td colspan="2">Gesamt:{{totalNum}}</td>
                <td colspan="2">Gesamtpreis:{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">Warenkorb leeren</button></td>
            </tr>
        </Tabelle>
    </div>
</Vorlage>

<Skript>
importiere {mapGetters,mapActions} von 'vuex'
Standard exportieren {
    Name: "shopCart",
    Daten(){
        zurückkehren {
            
        }
    },
    berechnet: {
        ...mapGetters({
            Warenkorbdaten: 'addShopList',
            Gesamtanzahl: 'Gesamtanzahl',
            Gesamtpreis: 'Gesamtpreis'
        })
    },
    Methoden: {
        ...mapActions({
            Warenkorb löschen:'Warenkorb löschen',
            deleteShop:"deletToShop"
        })
    }
}
</Skript>

 Vue von „vue“ importieren
Vuex von „vuex“ importieren
Einkaufswagen aus „./modules/cart“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Module:
        Warenkorb
    }
})

 konstanter Zustand = {
    shop_list: [{
        Ich würde: 11,
        Name: 'Schweinefleisch mit Fischgeschmack',
        Preis : 12
    }, {
            Ich würde: 22,
            Name: 'Kung Pao Chicken',
            Preis: 14
        }, {
            Ich würde: 34,
            Name: 'Geraspelte Kartoffeln',
            Preis: 10
        }, {
            Ich würde: 47,
            Name: 'Reis',
            Preis : 2
        }, {
            Ich würde: 49,
            Name: 'Ameisen zählen',
            Preis: 13
        }, {
            ID: 50,
            Name: 'Gebratener Speck mit Knoblauchsprossen',
            Preis: 15
        }],
        hinzufügen : []
}

const getter = {
    // Produktliste abrufen getShopList: state => state.shop_list,
    // Einkaufswagenliste abrufen addShopList: state => {
        // Die Methode map() gibt nach dem Aufruf der Funktion return state.add.map(({ id, num }) => { ein neues Array zurück, dessen Elemente die Werte der ursprünglichen Array-Elemente sind.
            let product = state.shop_list.find(n => n.id == id) // Die Methode find() gibt den Wert des ersten Elements des Arrays zurück, das den Test besteht (Beurteilung innerhalb der Funktion). Wenn kein Element die Bedingungen erfüllt, wird undefined zurückgegeben.
            if (product) {// Wenn das Produkt existiert return {// Gib Objekt...Produkt zurück,
                    Nummer
                }
            }
        })
    },
     // Gesamtzahl abrufen totalNum: (state, getters) => {
         sei total = 0
         getters.addShopList.map(n => { 
             Gesamtsumme += n.num
         })
         Rendite Gesamt
    },
    // Den Gesamtpreis berechnen totalPrice: (state, getters) => { 
        sei total = 0
        getters.addShopList.map(n => { 
            Gesamtsumme += n.Anz. * n.Preis
        })
        Rendite Gesamt
    }
},

const Aktionen = {
    // Zum Warenkorb hinzufügen addToCart({ commit},product) { 
        commit('Warenkorb hinzufügen', {
            ID: Produkt-ID
        })
    },
    // Einkaufswagen leeren clearToCart({ commit}) { 
        commit('Warenkorb löschen')
    },
    // Einzelnen Artikel löschen deleteToShop({ commit},product) { 
        commit('deletShop',Produkt)
    }
}

const Mutationen = {
    // Zum Warenkorb hinzufügen addCart(state, { id}){ 
        let Datensatz = Status.add.find(n => n.id == id)
        if (!record) {// Wenn das Produkt nicht im Warenkorb vorhanden ist state.add.push({// Produkt-ID hinzufügen,
                Anzahl: 1
            })
        } else { // Wenn das Produkt in den Warenkorb gelegt wurde, ändere die Menge record.num++
        }
    },
    // Einzelnen Artikel löschen deleteShop(state, product) { 
        Zustand.add.forEach((item,i) => { 
            if (item.id == product.id) { // Wenn das Produkt gefunden wurde state.add.splice(i,1)
            }
        })
    },
    // Warenkorb leeren clearCart(state) { 
        Zustand.add = []
    }
}

Standard exportieren {
    Zustand,
    Getter,
    Aktionen,
    Mutationen
}