この記事の例では、ショッピングカート機能を実装するための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) { 状態.追加 = [] } } エクスポートデフォルト{ 州、 ゲッター、 行動、 突然変異 } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Windows 版 MySQL のインストール、起動、基本設定に関する詳細なグラフィック チュートリアル
各浮動小数点型のストレージ サイズと範囲は、次の表に示されています。タイプサイズ範囲(符号付き)範囲...
目次方法1: 水平スクロールバーを設定する最も簡単な方法方法2(新規):ドラッグバーを追加して外側の...
1. はじめにEXPLAIN ステートメントは、MySQL がステートメントを実行する方法に関する情...
1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...
私は通常、大手ウェブサイトの特別ページや製品リリースページを訪問するのが好きです。なぜなら、たくさん...
目次1 マスター・スレーブの読み取り・書き込み分離1.1 コア2 マスタースレーブレプリケーション2...
表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...
1. 説明前回は、MySQL のインストールと構成、MySQL ステートメントの使用、MySQL デ...
この記事では、マウスの動きを追跡するためのJavaScriptの具体的なコードを参考までに紹介します...
目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...
目次1. Dockerfile とは何ですか? 2. Dockerfile構築プロセスの分析3. D...
1. this.$router.push() 1. ビュー <テンプレート> <d...
Alibaba Cloud ServerがFTPに接続できないFileZilla 425 データ接続...
目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....
2 日前、Raspberry Pi サーバーを Ubuntu 20 にアップグレードしました。今日...