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', []);
 }
 }
};
</スクリプト>

'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",ショップ)
 }
 },
 モジュール: {}
})