Vuexはシンプルなショッピングカートを実装します

<テンプレート>
 <div id="アプリ">
 <h3>ショッピングカートのデモ</h3>
 <時間>
 <h4>製品:</h4>
 <製品リスト />
 <時間>
 <h4>マイカート</h4>
 <ショッピングカート />
 </div>
</テンプレート>
<スクリプト>
'@/components/ProductList' から ProductList をインポートします。
'@/components/ShoppingCart' から ShoppingCart をインポートします。
 
エクスポートデフォルト{
 コンポーネント:
 製品リスト、
 ショッピングカート
 }
}
</スクリプト>

<テンプレート>
 <div>
  <ul v-for="製品内のアイテム" :key="item.id">
  <li>
   {{ item.title }} - {{ item.price }} &nbsp;&nbsp; 在庫: {{ item.inventory }><br>
   <button :disabled="!item.inventory" @click="addToCart(item)">カートに追加</button> 
  </li>
  </ul>
 </div>
 
</テンプレート>
 
<スクリプト>
'vuex' から { mapGetters, mapActions } をインポートします。
エクスポートデフォルト{
 計算: {
 // ...mapGetters('products',{
 // 製品: 'allProducts'
 // })
 ...mapGetters({
  製品: 'products/allProducts'
 })
 },
 メソッド: {
 ...mapActions('cart',['addToCart'])
 },
 作成された() {
 this.$store.dispatch('products/getAllProducts');
 }
 
}
</スクリプト>

<テンプレート>
 <div>
 <ul v-for="製品内のアイテム" :key="item.id">
  <li>{{ item.title }} *{{ item.quantity }}</li>
 </ul>
 <div>合計: {{ total }}</div>
 </div>
</テンプレート>
<スクリプト>
'vuex' から { mapGetters } をインポートします。
エクスポートデフォルト{
 計算: {
 ...mapGetters('カート', {
  製品: 'cartProducts',
  合計: 'cartTotalPrice'
 })
 }
}
</スクリプト>

'../../api' から api をインポートします。
 
定数状態 = {
 全て： []
}
 
const ゲッター = {
 allProducts: 状態 => state.all
}
 
定数アクション = {
 // 初期製品データを取得する getAllProducts({ commit }) {
 api.getProducts(products => commit('setProducts', products));
 }
}
 
const 変異 = {
 setProducts(状態、製品) {
 state.all = 製品;
 },
 // この商品の在庫を減らす decreamentInventory(state, { id }) {
 productItem を state.all.find(item => item.id === id); とします。
 製品アイテム.在庫 --;
 }
}
 
エクスポートデフォルト{
 名前空間: true、
 州、
 ゲッター、
 行動、
 突然変異
}

定数状態 = {
 追加されたリスト: []
}
 
const ゲッター = {
 cartProducts(状態、ゲッター、ルート状態) {
 state.addedList.map((item, index) => { を返します。
  productItem を rootState.products.all.find(product => product.id === item.id) とします。
  戻る {
  タイトル: productItem.title,
  価格: productItem.price、
  数量: アイテム.数量
  }
 })
 },
 cartTotalPrice(状態、ゲッター) {
 getters.cartProducts.reduce((total, product) => { を返します。
  合計 + (product.price * product.quantity) を返します。
 }, 0);
 }
}
 
定数アクション = {
 addToCart({ 状態, コミット }, 製品) {
 (製品在庫 > 0) の場合 {
  productItem を state.addedList.find(item => item.id === product.id); とします。
  if (製品アイテム) {
  commit('incrementItemQuantity', productItem);
  } それ以外 {
  コミット('pushItemToCart', 製品);
  }
  commit('products/decreamentInventory', product, { root: true });
 }
 }
}
 
const 変異 = {
 // ショッピングカート内の同一アイテムの数を増やす increaseItemQuantity(state, { id }) {
 productItem を state.addedList.find(item => item.id === id) とします。
 製品アイテム.数量++;
 },
 // 商品をショッピングカートに追加する pushItemToCart(state, { id }) {
 状態.追加されたリスト.push({
  id、
  数量: 1
 })
 },
 
}
 
エクスポートデフォルト{
 名前空間: true、
 州、
 ゲッター、
 行動、
 突然変異
}

'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
'./modules/cart' からカートをインポートします。
'./modules/products' から製品をインポートします。
 
Vue.js で Vuex をビルドします。
 
デフォルトの新しいVuex.Storeをエクスポートします({
 モジュール:
 カート、
 製品
 }
});

「vue」からVueをインポートします。
「@/components/App.vue」から App をインポートします。
「@/store」からストアをインポートします。
 
Vue.config で productionTip を false に設定します。
 
新しいVue({
 店、
 レンダリング: h => h(App)
}).$mount("#app");