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

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

ファイルディレクトリは次のとおりです。

ショッピングカートコンポーネント

<テンプレート>
    <div>
        <h1>vuex-shopCart</h1>
        <div class="shop-listbox">
            <ショップリスト />
        </div>
        <h2>厳選された製品</h2>
        <div class="ショップカートボックス">
            <ショッピングカート />
        </div>
    </div>
</テンプレート>

<スクリプト>
'./shop-list' から shoList をインポートします
'./shop-cart' から shopCart をインポートします。

エクスポートデフォルト{
  名前: 'ショップ',
  コンポーネント:
      'ショップリスト' : shoList,
      'ショップカート' : ショップカート
  }
}
</スクリプト>

<!-- CSS をこのコンポーネントのみに制限するために "scoped" 属性を追加します -->
<スタイルスコープ>
</スタイル>

製品リスト

<テンプレート>
    <div class="ショップリスト">
        <テーブル>
            <tr class="ショップリストタイトル">
                <td>id</td>
                <td>名前</td>
                <td>価格</td>
                <td>操作</td>
            </tr>
            <tr v-for = "shopList 内のアイテム" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{アイテム名}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="addToCart(item)">カートに追加</button>
                </td>
            </tr>
        </テーブル>
    </div>
</テンプレート>

<スクリプト>
「vuex」から {mapGetters、mapActions} をインポートします。
エクスポートデフォルト{
    名前: 'shopList',
    計算: {
        ...mapGetters({
                shopList:'getShopList',
            })
    },
    メソッド: {
        ...mapActions(['addToCart'])
    },
}
</スクリプト>

選択した製品リスト

<テンプレート>
    <div class="ショップリスト">
        <テーブル>
            <tr class="ショップリストタイトル">
                <td>id</td>
                <td>名前</td>
                <td>価格</td>
                <td>数量</td>
                <td>操作</td>
            </tr>
            <tr v-for="カートデータ内のアイテム" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{アイテム名}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td><button class="shop-dele dele-btn" @click="deleteShop(item)">削除</button></td>
            </tr>
            <tr v-if="cartData.length <= 0">
                <td colspan="5">データなし</td>
            </tr>
            <tr>
                <td colspan="2">合計:{{totalNum}}</td>
                <td colspan="2">合計金額:{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">ショッピングカートをクリア</button></td>
            </tr>
        </テーブル>
    </div>
</テンプレート>

<スクリプト>
'vuex' から {mapGetters,mapActions} をインポートします。
エクスポートデフォルト{
    名前: 'shopCart',
    データ（）{
        戻る {
            
        }
    },
    計算: {
        ...mapGetters({
            カートデータ:'addShopList',
            合計数: '合計数',
            合計価格:'合計価格'
        })
    },
    メソッド: {
        ...マップアクション({
            クリアカート:'クリアカート',
            ショップを削除:"ショップを削除"
        })
    }
}
</スクリプト>

vuex の作成

npm install vuex --save を実行し、vuex フォルダを作成し、フォルダ内に store.js を作成して、vuex を導入します。

ストア

「vue」からVueをインポートします
'vuex' から Vuex をインポートします
'./modules/cart' からカートをインポートします

Vue.use(Vuex)

デフォルトの新しいVuex.Storeをエクスポートします({
    モジュール:
        カート
    }
})

モジュールフォルダー modules を作成し、その中にストアモジュールを作成し、デフォルトで出力して store.js に導入します。

カート

定数状態 = {
    ショップリスト: [{
        id: 11,
        名称: 「魚風味の細切り豚肉」
        価格: 12
    }, {
            id: 22,
            名前:「カンパオチキン」
            価格: 14
        }, {
            id: 34,
            名前: 「シュレッドポテト」
            価格: 10
        }, {
            id: 47,
            名前: '米'、
            価格: 2
        }, {
            id: 49,
            名前: 「アリを数える」
            価格: 13
        }, {
            id: 50,
            名前: 「ニンニクの芽とベーコンの炒め物」
            価格: 15
        }],
        追加 ： []
}

const ゲッター = {
    // 商品リストを取得する getShopList: state => state.shop_list,
    // ショッピングカートリストを取得する addShopList: state => {
        // map() メソッドは、関数を呼び出した後の元の配列要素の値を要素とする新しい配列を返します。 return state.add.map(({ id, num }) => {
            let product = state.shop_list.find(n => n.id == id) // find() メソッドは、テスト (関数内での判断) に合格した配列の最初の要素の値を返します。条件を満たす要素がない場合は、undefined を返します。
            if (product){// 製品が存在する場合 return{// オブジェクトを返す...product,
                    番号
                }
            }
        })
    },
     // 合計数を取得する totalNum: (state, getters) => {
         合計を0にする
         getters.addShopList.map(n => { 
             合計 += n.num
         })
         合計を返す
    },
    // 合計価格を計算する totalPrice: (state, getters) => { 
        合計を0にする
        getters.addShopList.map(n => { 
            合計 += n.num * n.price
        })
        合計を返す
    }
},

定数アクション = {
    // カートに追加 addToCart({ commit},product) { 
        コミット('addCart', {
            id: 製品ID
        })
    },
    // ショッピングカートをクリアする clearToCart({ commit}) { 
        コミット('clearCart')
    },
    // 単一のアイテムを削除する deleteToShop({ commit},product) { 
        コミット('deletShop',製品)
    }
}

const 変異 = {
    // カートに追加 addCart(state, { id}){ 
        レコードを state.add.find(n => n.id == id) とします。
        if (!record){// ショッピングカートに商品が存在しない場合はstate.add.push({// 商品IDを追加し、
                番号: 1
            })
        } else { // 商品がショッピングカートに追加されている場合は、数量レコードを変更します。num++
        }
    },
    // 単一のアイテムを削除する deleteShop(state, product) { 
        state.add.forEach((item,i) => { 
            if (item.id == product.id) { // 商品が見つかった場合 state.add.splice(i,1)
            }
        })
    },
    // ショッピングカートをクリアする clearCart(state) { 
        状態.追加 = []
    }
}

エクスポートデフォルト{
    州、
    ゲッター、
    行動、
    突然変異
}