この記事の例では、ショッピングカート機能を実装するための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 でシンプルな無限ループスクロールアニメーションを実装する例
目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...
Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...
RedisはRedisバージョン5のapline(Alps)イメージを使用します。これは小さくて高速...
序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...
DockerイメージからDockerfileを取得する docker 履歴 --format {{....
方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...
<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...
<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...
インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...
この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...
私は W3school のチュートリアルに従いました。チュートリアルはとても良いと思います。各セクシ...
#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...
目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....
目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...
ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...