この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 まず効果を見てみましょう: コード: <テンプレート> <div class="ホーム"> <h1>Vuex ショッピングカートの例</h1> <追加元> </追加元> <ショップカート></ショップカート> </div> </テンプレート> <スクリプト> './Add.vue' から AddFrom をインポートします。 './ShopCart.vue' から ShopCart をインポートします。 // @ は /src へのエイリアスです // '@/components/HelloWorld.vue' から HelloWorld をインポートします エクスポートデフォルト{ 名前: 'ホーム'、 コンポーネント: 追加元、 ショッピングカート }, }; </スクリプト> <スタイル> テーブル { 幅: 800ピクセル; マージン: 0 自動; 境界線: 1px 実線 #ccc; 境界線の間隔: 0; } tbody th、 tボディtd { 境界線: 1px 実線 #ccc; テキスト配置: 中央; } h1{ テキスト配置: 中央; } 。追加{ 幅: 800ピクセル; マージン: 0 自動; } </スタイル> 親コンポーネント <テンプレート> <div class="add"> <div class="from-group"> <label for="">製品番号</label> <input type="text" v-model="shop.id" placeholder="商品番号を入力してください"> </div> <div class="from-group"> <label for="">製品名</label> <input type="text" v-model="shop.name" placeholder="商品名を入力してください"> </div> <div class="from-group"> <label for="">製品価格</label> <input type="text" v-model="shop.price" placeholder="商品価格を入力してください"> </div> <div class="from-group"> <label for="">商品の数量</label> <input type="text" v-model="shop.count" placeholder="商品の数量を入力してください"> </div> <div class="from-group"> <button @click="add">商品を追加</button> </div> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: '追加', データ() { 戻る { 店:{} }; }, 方法:{ 追加(){ this.$store.dispatch("addShopList",this.shop) this.shop = { id:"", 名前:""、 価格:""、 カウント:"" } } } }; </スクリプト> <スタイルスコープ> 。追加{ 幅: 800ピクセル; テキスト配置: 中央; } </スタイル> 「バッシュ」 <テンプレート> <div class="ショップカート"> <テーブル> <ヘッドボーダー> <tr> <th>製品番号</th> <th>製品名</th> <th>製品価格</th> <th>商品の数量</th> <th>小計</th> <th>オペレーション</th> </tr> </thead> <tbody v-if="ショップの長さ > 0"> <tr v-for="(i, e) ショップ内" :key="e"> <td>{{ i.id }}</td> <td>{{ i.name }}</td> <td>{{ i.price }}</td> <td> <button @click="add(e)">+</button> <input type="text" v-model="i.count" /> <button @click="delet(e)">-</button> </td> <td>¥{{ i.price * i.count }}</td> <td><button @click="del(e)">削除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="6" align="right">合計: {{ total }}</td> <button @click="clear">ショッピングカートをクリア</button> </tr> </tfoot> </テーブル> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'Shop-Cart'、 コンポーネント: {}, データ() { 戻る {}; }, 計算: { 店() { this.$store.getters.getlist を返します。 }, 合計() { this.$store.getters.getShopTotal を返します。 } }, メソッド: { 削除(e) { // this.$store.dispatch() this.$store.dispatch('remoteList', e); }, 追加(e) { this.$store.dispatch('addList', e); }, 削除(e) { this.$store.dispatch('deleteList', e); }, クリア() { this.$store.dispatch('clearList', []); } } }; </スクリプト> vuex コンポーネント 'vue' から Vue をインポートします 'vuex' から Vuex をインポートします Vue.use(Vuex) デフォルトの新しいVuex.Storeをエクスポートします({ 州: { リスト: [{ id: 1, 名前: 「わぁ、ハハハ」 価格: 3, カウント: 0 }, { id: 2, 名前: 「わはは」、 価格: 3, カウント: 0 } ] }, ゲッター: { //ショッピングカートデータを取得する getlist(state) { 状態リストを返す }, //商品の合計価格 getShopTotal(state,index) { 結果を 0 にします。 state.list.forEach((item, index) => { 結果 += アイテム.価格 * アイテム.数 }) 結果を返す }, }, 突然変異: //ショッピングカート内の単一のデータを削除する remoteList(state,index) { state.list.splice(インデックス、1); console.log("aaa",状態) }, //商品数を増やす addList(state, index) { state.list[インデックス].count++; }, //商品数を減らす deleteList(state, index) { state.list[インデックス].count--; if(state.list[index].count<=0){ 状態.リスト[インデックス].カウント = 0 戻る ; } }, // ショッピングカートをクリアする clearList(state, arr) { 状態リスト = arr }, addShopList(状態、ショップ){ state.list.push(ショップ) } }, //アクションを使用してミューテーションメソッドを呼び出します。アクション: { リモートリスト({ 専念 }、 索引) { commit("remoteList", インデックス) }, リストを追加します({ 専念 }、 索引) { コミット("addList", インデックス) }, リストを削除します({ 専念 }、 索引) { コミット("deleteList", インデックス) }, リストをクリア({ 専念 }, 編曲) { コミット("clearList", arr) }, addShopList({コミット},ショップ){ コミット("addShopList",ショップ) } }, モジュール: {} }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ネイティブJavaScriptでカルーセルを実装する
>>: Vue でシンプルな無限ループスクロールアニメーションを実装する例
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...
ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...
クリックハウスの紹介ClickHouse は、SQL クエリを使用して分析データ レポートをリアルタ...
目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...
この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...
目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...
包括的なドキュメントgithubアドレスhttps://github.com/RocketChat/...
(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...
目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...
ここにmysqlドライバmysql.data.dllがあります知らせ:ここではX86バージョンが多く...
目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...
目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...
MySQL 最大接続数の表示と最大接続数の変更1. 最大接続数を確認する '%max_con...
<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...