参照：vuexを使用してショッピングカートを実現する
vue + vuexを使用してショッピングカート機能を実現する
1.まず、ショッピングカートモジュールはどのような機能を実現しますか？
- 詳細ページの商品データをクリックして、ショッピングカートにデータを追加します
- ショッピングカートに商品の名前、単価、数量を表示する
- 選択機能を使用すると、選択または選択解除、すべて選択またはすべてキャンセル、選択した製品の合計価格の計算のみが可能で、製品を選択するかどうかを決定できます
2.論理的な配置
まず、ショッピングカートの静的ページの実現は4つのコンポーネントで実現されます。各商品の詳細情報を別のコンポーネントとして利用し、ショッピングカート内の商品一覧の表示をコンポーネントとして利用し、下部選択ボタンとチェックアウトボタンもコンポーネントとして利用します。最後に、これらのサブコンポーネントは、ショッピングカートページコンポーネント全体を紹介します。
ショッピングカートのデータ相互作用を実現するためのvuex状態管理メカニズムを通じて、ストアファイルを作成し、それをvueインスタンスにマウントし、ストアファイルにデータをマウントできる状態を定義し、製品情報やその他のコンポーネントを保存する配列cartListを定義しますこのデータを取得して使用できます。
機能の実現方法1
商品をクリックしてショッピングカートに追加します。状態のcartListを変更し、mutationsメソッドを使用して状態のデータを変更する必要がありますが、mutationsは同期の問題のみを処理でき、actionsメソッドは非同期の問題の処理に使用できます。
私が作成したモールシステムでは、商品の詳細ページでショッピングカートの追加機能のみが設定されています。特定の実装では、mapActionsが詳細ページコンポーネントに導入されています。クリックしてショッピングカートに追加すると、ストアファイルのアクションオブジェクトで定義されたショッピングの追加が実行されますcartメソッドでは、actionsオブジェクトが追加された製品を決定します。前の製品がすでに存在する場合は、数量が1増え、製品が存在しない場合は、製品がcartListに追加されます。promiseオブジェクトを返します。
機能2の実現方法
関数1では、ショッピングカートに追加された製品オブジェクトをcartListに入れました。製品オブジェクトには、ショッピングカートに表示する必要がある詳細情報が含まれています。** mapGettersをショッピングカートの商品リスト表示コンポーネントに導入して、vuexでデータを受信します。同時に、v-forは、cartList内の製品オブジェクトをトラバースするために使用されます。同時に、単一の製品情報を表示するコンポーネントは、propsを介して親コンポーネントから単一の製品オブジェクトを受け取ります。**は、計算された属性でvuexにマウントされたデータを受け取ります。mapGettersは実際にストア内のgetter属性をマップします。getterは実際にはvueの計算された属性に類似しています。製品情報とその長さを格納する配列データを知る必要があるため、データはgetterを通じてさらに処理され、必要な値が取得されます、ゲッターに入れます
機能3の実現方法
vuexのデータは引き続きmapGettersを介して受信されます。製品を格納するcartList配列の場合、配列のフィルターメソッドを使用して選択された製品を検索し、配列のreduceメソッドを使用して選択された製品の合計値を計算します。すべてを選択するロジック：一部またはすべての製品が選択されていない場合は、 forEachは、cartListの各項目を選択します。すべての項目が選択されている場合、cartListの各項目は選択されていません