vuex ベースのショッピングカート機能の実装

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuexはシンプルなショッピングカートを実装します
  • Vuex は小さなショッピングカート機能を実装します
  • Vuexはショッピングカートの追加、削減、削除を実装します
  • Vuex がショッピングカート機能を実現
  • vuex を使用してショッピングカート機能をエレガントに実装するサンプルコード
  • vuex で実装されたシンプルなショッピングカート機能の例
  • vuexを使用してショッピングカートH5ページのサンプルコードを作成しました
  • Vuex はシンプルなショッピングカート機能を実装します

<<:  ネイティブJavaScriptでカルーセルを実装する

>>:  Vue でシンプルな無限ループスクロールアニメーションを実装する例

推薦する

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

Linuxでディレクトリを効率的に切り替える方法

Linux でディレクトリを切り替えるとなると、誰もが間違いなくcdコマンドを思い浮かべるでしょう。...

DockerはRedisを起動し、パスワードを設定します

RedisはRedisバージョン5のapline(Alps)イメージを使用します。これは小さくて高速...

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

docker ポートを追加して dockerfile を取得する方法

DockerイメージからDockerfileを取得する docker 履歴 --format {{....

MySQL ルートパスワードを変更する 4 つの方法 (要約)

方法1: SET PASSWORDコマンドを使用するまずMySQLにログインします。フォーマット: ...

ビジュアルデザインとインタラクションデザインについて

<br />製品設計プロセス全体において、ビジュアルデザインとインタラクションデザインの...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

MySQL サーバー 5.7.20 のインストールと設定方法のグラフィック チュートリアル

この記事ではMySQL 5.7.20のインストールと設定方法を記録し、皆さんと共有します1. MyS...

HTML独習の旅(I)基本要素と属性の練習(自分でコードを書く)

私は W3school のチュートリアルに従いました。チュートリアルはとても良いと思います。各セクシ...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

JS で配列の重複排除を実装する 7 つの方法

目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....

JS配列の一般的な方法とテクニックを学び、マスターになりましょう

目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...