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 でシンプルな無限ループスクロールアニメーションを実装する例

推薦する

HTML ウェブページのブラウザタイトルバーに小さなアイコンを表示する方法

この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...

MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...

div ボックス モデルの使用経験の概要

ボックスモデルの計算<br />マージン + ボーダー + パディング + コンテンツC...

DockerはClickHouseをインストールし、データテストを初期化します

クリックハウスの紹介ClickHouse は、SQL クエリを使用して分析データ レポートをリアルタ...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

Windows/Mac で Docker を使用して MySQL (utf8 を含む) をインストールする

目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...

DockerにrockerChatをインストールし、チャットルームを設定するための詳細な手順

包括的なドキュメントgithubアドレスhttps://github.com/RocketChat/...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

Linuxカーネルとデバイスツリーのコンパイルと書き込みを分析する

目次1. 材料を準備する2. Linuxカーネルファイルをダウンロードする3. コンパイル4. TF...

mysql.data.dll ドライバーのさまざまなバージョンの簡単な分析

ここにmysqlドライバmysql.data.dllがあります知らせ:ここではX86バージョンが多く...

Vue でよく使われる命令 v-if と v-show の違いを簡単に分析します。

目次序文1.v-ショー2.v-if 3. v-showとv-ifの違い1. 原則の違い2. アプリケ...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

Mysql は最大接続数を表示し、最大接続数を変更します

MySQL 最大接続数の表示と最大接続数の変更1. 最大接続数を確認する '%max_con...

HTML テーブルタグチュートリアル (45): テーブル本体タグ

<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...