Vuex implementiert einen einfachen Einkaufswagen

In diesem Artikelbeispiel wird der spezifische Code von Vuex zur Implementierung eines einfachen Einkaufswagens als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Dateistruktur

App.vue

<Vorlage>
 <div id="app">
 <h3>Warenkorb-Demo</h3>
 <hr>
 <h4>Produkte:</h4>
 <Produktliste />
 <hr>
 <h4>Mein Warenkorb</h4>
 <Einkaufswagen />
 </div>
</Vorlage>
<Skript>
importiere ProductList aus „@/components/ProductList“;
importiere ShoppingCart aus „@/components/ShoppingCart“;
 
Standard exportieren {
 Komponenten:
 Produktliste,
 Warenkorb
 }
}
</Skript>

Produkte.vue

<Vorlage>
 <div>
  <ul v-for="Artikel in Produkten" :key="item.id">
  <li>
   {{ item.title }} - {{ item.price }} &nbsp;&nbsp; Lagerbestand: {{ item.inventory }}<br>
   <button :disabled="!item.inventory" @click="addToCart(item)">zum Warenkorb hinzufügen</button> 
  </li>
  </ul>
 </div>
 
</Vorlage>
 
<Skript>
importiere { mapGetters, mapActions } von „vuex“;
Standard exportieren {
 berechnet: {
 // ...mapGetters('Produkte',{
 // Produkte: 'alleProdukte'
 // })
 ...mapGetters({
  Produkte: „Produkte/alleProdukte“
 })
 },
 Methoden: {
 …mapActions('Warenkorb',['Zum Warenkorb hinzufügen'])
 },
 erstellt() {
 dies.$store.dispatch('products/getAllProducts');
 }
 
}
</Skript>

Einkaufswagen.vue

<Vorlage>
 <div>
 <ul v-for="Artikel in Produkten" :key="item.id">
  <li>{{ Artikeltitel }} *{{ Artikelmenge }}</li>
 </ul>
 <div>Gesamt: {{ Gesamt }}</div>
 </div>
</Vorlage>
<Skript>
importiere { mapGetters } von „vuex“;
Standard exportieren {
 berechnet: {
 ...mapGetters('Warenkorb', {
  Produkte: 'cartProducts',
  Gesamt: 'WarenkorbGesamtpreis'
 })
 }
}
</Skript>

module/produkte.js

API aus „../../api“ importieren;
 
konstanter Zustand = {
 alle: []
}
 
const getter = {
 alleProdukte: Status => Status.alle
}
 
const Aktionen = {
 // Erste Produktdaten abrufen getAllProducts({ commit }) {
 api.getProducts(Produkte => commit('setProducts', Produkte));
 }
}
 
const Mutationen = {
 setProducts(Status, Produkte) {
 Zustand.alle = Produkte;
 },
 // Reduzieren Sie den Bestand dieses Produkts decreamentInventory(state, { id }) {
 let productItem = status.alles.find(item => item.id === id);
 Produktartikel.Inventar --;
 }
}
 
Standard exportieren {
 Namespace: wahr,
 Zustand,
 Getter,
 Aktionen,
 Mutationen
}

Module/Warenkorb.js

konstanter Zustand = {
 hinzugefügteListe: []
}
 
const getter = {
 WarenkorbProdukte(Status, Getter, Stammstatus) {
 returniere status.addedList.map((item, index) => {
  let productItem = rootState.products.all.find(product => product.id === item.id);
  zurückkehren {
  Titel: Produktartikel.Titel,
  Preis: ProduktArtikel.Preis,
  Menge: Artikelmenge
  }
 })
 },
 cartTotalPrice(Status, Getter) {
 returniere getters.cartProducts.reduce((total, product) => {
  Gesamtsumme zurückgeben + (Produktpreis * Produktmenge);
 }, 0);
 }
}
 
const Aktionen = {
 addToCart({ Status, Commit }, Produkt) {
 wenn (Produkt.Inventar > 0) {
  let productItem = status.addedList.find(item => item.id === product.id);
  wenn (ProduktArtikel) {
  commit('Artikelmenge erhöhen', Produktartikel);
  } anders {
  commit('pushItemToCart', Produkt);
  }
  commit('Produkte/DecreamentInventory', Produkt, { root: true });
 }
 }
}
 
const Mutationen = {
 // Anzahl identischer Artikel im Warenkorb erhöhen increaseItemQuantity(state, { id }) {
 let productItem = status.addedList.find(item => item.id === id);
 ProduktArtikel.Menge++;
 },
 // Artikel zum Einkaufswagen hinzufügen pushItemToCart(state, { id }) {
 Zustand.addedList.push({
  Ausweis,
  Menge: 1
 })
 },
 
}
 
Standard exportieren {
 Namespace: wahr,
 Zustand,
 Getter,
 Aktionen,
 Mutationen
}

speichern/index.js

importiere Vue von „vue“;
importiere Vuex von „vuex“;
Einkaufswagen aus „./modules/cart“ importieren;
Produkte aus „./modules/products“ importieren;
 
Vue.use(Vuex);
 
exportiere standardmäßig neuen Vuex.Store({
 Module:
 Warenkorb,
 Produkte
 }
});

Haupt-JS

importiere Vue von „vue“;
App aus "@/components/App.vue" importieren;
Store aus „@/store“ importieren;
 
Vue.config.productionTip = falsch;
 
neuer Vue({
 speichern,
 rendern: h => h(App)
}).$mount("#app");

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierung einer Warenkorbfunktion basierend auf Vuex
Vuex implementiert kleine Einkaufswagenfunktion
Vuex implementiert das Hinzufügen, Reduzieren und Entfernen von Einkaufswagen
Vuex realisiert Warenkorbfunktion
Beispielcode für die Verwendung von Vuex zur eleganten Implementierung einer Warenkorbfunktion
Einfaches Beispiel einer Warenkorbfunktion, implementiert von vuex
Ich habe mit Vuex einen Beispielcode für eine H5-Einkaufswagenseite geschrieben
Vuex implementiert einfache Warenkorbfunktion

<<: Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue

>>: JS realisiert den Scroll-Effekt von Online-Ankündigungen