Exampleを元にショッピングカードを実装を通してVuexの理解を深めると同時にvue.jsを使ったより実践的なアプリケーションの作り方を一緒に学ぶことができます。他のアプリケーションを構築する際の助けになるヒントがあると思うので少し長いですが、理解しながら読みすすめてください。gettersやヘルパー関数mapXXXの基本を理解しておく必要があります。購入処理を行うVueの環境構築vue-cliによるプロジェクトの作成vueコマンドを利用してプロジェクトの作成を行います。ここではプロジェクトの名前はshopping-cartとします。マニュアルのインストールを選択して、Vuexを忘れずに選択してください。shopping-cartインストールが完了したら以下のコマンドを実行してください。Cartを作成するための準備は完了です。Express.jsなどのバックエンド側の構築を行わないのでショッピングカードに入れる商品一覧はファイルから取得します。vueのプロジェクトディレクトリにあるsrcの下にapiディレクトリを作成し、shop.jsファイルを作成してください。3つの商品情報と今後使用する2つの関数getProductsとbuyProductsを追加します。在庫数のinventoryの4つのプロパティから構成されています。getProductsは商品情報を取得する際に利用し、buyProductsは購入を実行した時に処理が成功したか失敗したかをランダムに制御する関数です。}}cbはcallbackの略でcallback関数が渡されますApp.vueファイルにはデフォルトでもコードが記述されていますが、一度削除して次の内容に書き換えます。}}</script>App.vueファイル内で商品一覧を表示するProductList.vueファイルをimportしているのでcomponentsディレクトリの下にProductList.vueファイルを作成します。ProductList.vueファイルの中では商品一覧を表示させるためにv-forディレクティブを追加し、データプロパティproductsを展開します。[],}},created(){}}</script>ProductList.vueにアクセスがあると自動で商品情報の処理を行うためにライフサイクルフックcreatedの中に商品一覧を取得するコードを記述します。商品一覧はapi¥shop.jsファイルに保存されているので、このファイルをimportする必要があります。import後、shop.jsのgetProductsメソッドを使って商品情報を取得します。取得することができましたが、Vuexを利用していないので次はVuexを利用したコードへの書き換えを行います。Vuexを利用して商品一覧を取得Vuexはインストール済みなのですぐに利用することができます。Vuexに関する記述はstore¥index.jsファイルで行います。Vuexでデータを集中管理するためにProductList.vueファイルで行っていたshop.jsファイルのimportをindex.jsで行います。商品情報の入ったデータプロパティproductsはVuexの中で管理を行うのでstateに設定します。ライフサイクルフックcreatedで直接行っていた商品情報の取得は、ActionsにgetAllProductsを追加し、commitでsetProductsのmutationsを実行することで行います。}})context.commitについてはcontextのcommitメソッドだけ利用する場合は、下記のように書き換えることが可能です。},ProductList.vueではデータプロパティproductsを削除し、ライフサイクルフックcreatedではdispatchメソッドを使ってVuexのActionsを実行することで商品情報を取得します。v-forで展開するproductsはcomputedプロパティを使ってstate.productsから取得しています。mapStateへの変更computedプロパティのproductsについては、mapStateを使うことでコードを短縮化することができます。mapStateなどのヘルパー関数を利用する場合は、importを忘れるとエラーが発生するので注意してください。mapState(['products']),created(){this.$store.dispatch('getAllProducts')mapStateに変更してもブラウザに表示される内容は変わりません。商品一覧の各行にボタンをつけて、ボタンをクリックするとショッピングカートに商品が移動する処理を実装します。追加するボタンにはクリックイベントaddProductToCartを設定します。cart</button></li></ul></template>ブラウザで確認するとボタンは追加されますが、カートへの追加処理は行っていないためボタンをクリックしても何も起こりません。ボタンの追加カートへの処理を追加する前にカートに移動した移動した商品情報の保管場所を設定します。商品一覧と同様にカート内の商品一覧もVuexのstateのitemsとして保存します。ユーザがボタンをクリックするとaddProductToCartが実行され商品情報がitemsに追加されます。Vuexのindex.jsファイルのActoionsにaddProductToCartを追加し、mutationsのpushProductToCartでitemsの中にクリックを押した商品情報を入れます。itemsに保存する情報は商品が識別できるidと数量qutantityです。product)}},ここまでの設定でボタンをクリックするとstateのitemsに商品情報が登録されます。itemsの中にはidとquantityを持つオブジェクトとして登録します。ショッピングカートの中身を表示させるsrc¥componentsの下にShoppingCart.vueファイルの作成を行います。mapGetters(['cartProducts']),}</script>カートに表示させる商品はGettersのcartProducts(これから作成)を利用して行います。v-showではカートの中に商品が入っていればカートの中身をv-forディレクティブで見れるようにv-showによって制御を行っています。GettersのcartProductsはstore¥index.jsに追加します。itemsにはidとquantityしか入っていないため、state.productsに入った商品一覧情報を使ってtitleとpriceを取得しています。}},ここまでの設定でボタンをクリックした商品をショッピングカートに入れることができます。ブラウザで確認しましょう。Cartの部分が追加したShoppingCart.vueで表示しているカートの中身です。アクセス直後では、カートには何も商品が入っていません。Cartボタンをクリックするとボタンを押した行の商品がカートに入っていきます。cartを押すと同じ商品も別の行として追加されて行きます。カートに入れる際に同じ商品がカートに存在するかのチェックを行っていないためです。商品がカートに入った状態カートに入る商品を制御するカートに同じ商品を入れた場合は商品がカートにすでに存在しているかチェックを行い、存在している場合は数量が増えるようにコードの更新を行います。ActionsのaddProductToCartを更新します。itemsの中に同じidを持つproductがあるかチェックを行い、ない場合はitemsに追加し、ある場合はmutationsのincrementItemQuantityを実行して数量を増やします。Actinosの中でstateの値を変更するのではなく必ずmutationsを使うことを忘れないでください。}}store¥index.jsのmutationsにincrementItemQuantityを追加します。処理の内容はitemsの中から同じidを持つitemを見つけて、そのitemのquantityを1つ増やします。}と記述することが可能です。コード更新後、ボタンをクリックすると同じ商品の場合場合は、ショッピングカードの行が増えるのではなく数量が増えていきます。ボタンを押すと数量が増える商品の在庫管理を制御する冒頭で説明したようにshop.jsで読み込む商品情報には在庫数inventoryの情報も含まれています。ショッピングカートに入れる数量がinventoryを超えないように在庫数の管理も行っていきます。以下の2点の処理を加えます。cartボタンを無効にするカートに入れた後の商品情報の在庫数を減らす処理を追加します。store¥index.jsに商品の在庫数を減らすmutationsのdecrementProductIventoryを追加します。product.inventory--;}ActionsのaddProductToCartの中でカートを更新した後に追加したdecrementProductInventoryを実行します。cartItem);}commit('decrementProductIventory',product);}在庫数を減らす処理が完了したら、在庫数をチェックしてボタンを無効にする処理を追加します。product.inventryが0になるとボタンが無効になります。cartボタンがクリックできなくなります。合計金額を表示ショッピングカートであれば合計金額が表示される機能が必要になります。カートに入れた商品の合計金額を計算するコードをVuexのGettersにcartTotalPrice追加します。reduceメソッドを使ってカートに入っている商品の合計金額を計算しています。}},ショッピングカートの表示画面に合計金額を表示させるため、ShoppingCart.vueのmapGettersにcartTotalPriceを追加して表示を行います。mapGetters(['cartProducts','cartTotalPrice']),}</script>ブラウザで確認するとカートの中に商品が入っているとカートの中に金額が表示されるようになります。購入処理を行うカートへの商品の登録、合計金額の表示ができるようになったので、カートに入った商品の購入処理を実装します。購入処理の内容な購入処理が正常に行われれば画面には”successful”が表示され、失敗すればエラーメッセージfailedが表示されるといったものです。クレジットカードなどの決済エラーなどを想像してください。購入ボタンを合計金額の表示の下に追加します。商品がカートに入っていない時は購入ボタンは無効にしています。checkoutメソッドはこれから作成します。@click="checkout(cartProducts)">Checkout</button></p>ブラウザで確認するとCheckOutボタンは表示されていますが、無効なのでボタンをクリックすることはできません。カートに商品がないと購入ボタンは押せない商品を一つカートの中に入れるとボタンはクリック可能になります。ボタンを押した後の処理は何も設定していないのでボタンを押しても何も起こりません。カートに商品が入るとボタンが押せるcheckoutボタンを押した後の制御を行っていきます。購入処理が成功したかどうかのステータスを持つcheckoutStatusをstore¥index.jsのstateに追加します。null},購入処理のステータスを表示させるhtmlタグをshopping-cart.vueファイルのcheckoutボタンの下に追加します。}}.</p>checkoutStatusはmapstateを利用して、shoppongCart.vueファイルからアクセスできるように設定します。次にcheckoutボタンをクリックすると実行されるのcheckoutメソッドをshoppingCart.vueファイルに追加します。}}dispatchにより、Actionsのcheckoutを実行するので、store¥index.jsファイルにcheckoutを追加します。Actionsのcheckoutでは、購入した商品の情報をsavedCartItemsに保存します。動作確認のためにmutationsのsetCheckoutStatusを使ってメッセージを入れます。setCartItemsのmutationsを使ってカートの中身を空にします。},},commitで実行しているmutationsのsetCheckoutStatusとsetCartItemsも追加します。status}ブラウザを開いて商品を1つカートに入れます。checkoutのメッセージが表示されれば設定どおりの動作になります。chekoutボタンをクリックshop.jsに最初に追加したbuyProductsを使って、購入処理が成功、失敗を制御します。100)}checkoutのActionsを下記のように書き換えます。buyProductsを実行し、成功した場合はcheckoutStatusのメッセージにはsuccesfulが入ります、失敗した場合はfailedが入り、一度空にしたカートの中身をsavedCartItemsで保存していた商品情報で再度カートを購入処理前の状態に戻しています。)},購入処理の機能が実装できたので、ブラウザを使って動作確認します。購入処理に失敗した場合は、Checkoutのメッセージにfailedが表示され、カートの中身を処理前の状態に戻ります。購入処理に成功した場合は、Checkoutのメッセージにsuccessfulが表示され、カートの中身は空になります。購入処理に成功した場合vue.jsのVuexを使って在庫管理とショッピングカートへの商品の移動と購入処理の流れを実装することができました。ショッピングカートから商品からの商品の削除方法等の機能がないので引き続き更新予定です。