Vuex implementiert einen einfachen Einkaufswagen

<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>

<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>

<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>

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
}

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
}

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
 }
});

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");