商品加入購物車，vuex 管理狀態

商品加入購物車，保存在store中。大概一下步驟：

1.實現點擊加入購物車功能；

2.徽標數值的自動更新；

3.購物車商品的本地持久存儲；

4.獲取購物車商品並加載顯示；

5.加載顯示購物車列表時初始化numbox數量值；

6.實現購物車商品數量改變同步到store中；

7.購物車中商品的刪除；

8.把store中商品的選中狀態selected同步到頁面上；

9.同步shopcar頁面商品選中狀態到store中保存；

10.勾選商品的總價和數量自動計算

一、將商品加入保存到store中

<mt-button type="danger" size="small" @click="addToShopCar">加入購物車</mt-button>

拼接出一個對象，通過傳參的形式，傳給mutations中的方法，其中 numBoxCount 為 numbox 的值，即加入購物車的商品數，通過子組件調用父組件的方法，將值傳給父組件得來；

//  添加至購物車
        addToShopCar(){
          this.ballFlag = !this.ballFlag;

        //  拼接出一個商品對象保存到store中、{id:商品id,count:要購買的數量,price:商品價格,selected:false}
          const YHHSelectShop = {
            id:this.id,
            count:this.numBoxCount,
            price:this.youHaoHuo.price,
            selected:true
          };
          this.$store.commit('YHHSelectShopAddToShopCar',YHHSelectShop)
        }
      }

在mutations中，將商品存入到 localStorage中持久化，

  YHHSelectShopAddToShopCar(state,YHHSelectShop) {

    // 假設購物車中沒有找到
    var flag = false;

    state.shopCar.some(item => {
      if (item.id == YHHSelectShop.id) {
        item.count += parseInt(YHHSelectShop.count);
        flag = true;
        return true
      }
    });
    // 最終沒有找到，就把商品加入購物車中
    if (!flag) {
      state.shopCar.push(YHHSelectShop)
    }
    // 存儲到 localStorage
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  },

然后store再從localStorage中取數據 const shopCarItem = JSON.parse(localStorage.getItem('shopCar') || '[]'); shopCar: shopCarItem 

二、得到徽標數值，getters 中

  // 徽標數值
  getAllSelectShopCount(state){
    var allCount = 0;
    state.shopCar.forEach(item => {
      allCount += item.count
    });
    return allCount
  },

然后去APP.vue 顯示徽標數值

      <router-link class="mui-tab-item-my" to="/shopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge" id="shopCar">{{ $store.getters.getAllSelectShopCount }}</span></span>
        <span class="mui-tab-label">購物車</span>
      </router-link>

三、獲取購物車中所有商品列表並加載顯示，遍歷shopcar中的每件商品得到id，請求數據

 // 獲取到 store 中所有的商品
          async getShopCarList(){
            var idArr = [];
            var shopId;

            // 從store中拿到購物車中商品的id
            this.$store.state.shopCar.forEach(item => idArr.push(item.id));

            // 如果購物車中沒有商品，直接返回
            if (idArr.length === 0) {
              return
            }
            // console.log(idArr)
            // 循環得到id，分別請求數據
              for (let i = 0;i < idArr.length;i++){

                shopId = parseInt(idArr[i]);
                // console.log(typeof (shopId))

                if (shopId >= 1 && shopId <= 40) {
                  const res = await this.$axios.get('/getshoplistshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 41 && shopId <= 46) {
                  const res = await this.$axios.get('/getyouhaohuoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                }  else if (shopId >= 50 && shopId <= 139) {
                  const res = await this.$axios.get('/getyouhaohuoinfoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 140 && shopId <= 229) {
                  const res = await this.$axios.get('/getaiguangjieinfoshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                } else if (shopId >= 230 && shopId <= 259) {
                  const res = await this.$axios.get('/getcainilikeshopcar/'+shopId,this.model);
                  // console.log(res)
                  if (res.status === 200) {
                    this.shopCarList = this.shopCarList.concat(res.data)
                  }
                }
              }
            // console.log(this.shopCarList)
          },

四、shopcar頁面numbox的加載顯示，getters 中

  // shopcar 中各個商品的 numbox 值
  getShopCarSelectCount(state){
    var shopCarCount = {};
    state.shopCar.forEach(item => {
      // 商品的id作為鍵，數量作為值
      shopCarCount[item.id] = item.count
    });
    return shopCarCount
  },

然后在shopcar頁面，將值傳給numbox子組件，子組件通過props接受Count值，

<NumBox 

:Count = "$store.getters.getShopCarSelectCount[item.id]"  // 商品件數轉給子組件

:shopId = "item.id"  // 商品id傳給子組件

></NumBox>

五、shopcar頁面numbox改變同步到store中

mutations中

  // shopcar 頁面修改 numbox
  updateShopCarCount(state,selectShop) {
    state.shopCar.some(item => {
      if (item.id == selectShop.id) {  //  item.id 類型為Number，selectShop.id 類型為string
        item.count = parseInt(selectShop.count);
        return true
      }
    });
    // 當修改完商品的數量，把最新的數量保存到本地存儲中
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

shopcar-numbox組件中，調用mutations中的方法，將值傳給mutations

 countChanged(){ // 數量改變
          // console.log(this.$refs.numBox.value)
          // 每當數量值改變，立即把當前最新的數量同步到 store 中，覆蓋之前的數量值
          this.$store.commit("updateShopCarCount",{
            id:this.shopId,
            count:this.$refs.numBox.value
          })
        }

六、商品的刪除

刪兩個部分，1.界面的商品數組中；2.store中

shopcar組件中

   // 取消訂單
        remove(id,index){
        //    點擊刪除，把商品從 store 中根據傳遞的id刪除
        //      同時把當前組件中的 shopCarList 中，對應要刪除的那個商品使用index來刪除
          this.shopCarList.splice(index,1);  // 刪數組shopCarList中

          this.$store.commit('removeFromShopCar',id)  // 刪store中
        }

mutations中

  //  根據id從store中的購物車中刪除對應的數據
  removeFromShopCar(state,id) {
    state.shopCar.some((item,i) => {
      if (item.id == id) {
        state.shopCar.splice(i,1);
        return true
      }
    });
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

七、store 中商品選中的狀態 selected 同步到頁面上

getters 中

  // 商品選中狀態
  getShopCarSelected(state) {
    var Obj = {};
    state.shopCar.forEach(item => {
      Obj[item.id] = item.selected
    });
    return Obj
  },

在shopcar頁面switch中

            <mt-switch class="shopCar-switch"
              v-model="$store.getters.getShopCarSelected[item.id]">
            </mt-switch>

八、selected 狀態改變同步到store中

mutations 中

  // 改變商品選中
  updateShopCarSelected(state,switchInfo) {
    state.shopCar.some(item => {
      if (item.id == switchInfo.id) {
        item.selected = switchInfo.selected
      }
    });
    localStorage.setItem('shopCar',JSON.stringify(state.shopCar))
  }

shopcar中，將id及狀態傳給mutations

            <mt-switch class="shopCar-switch"
              v-model="$store.getters.getShopCarSelected[item.id]"
              @change="selectedChange(item.id,$store.getters.getShopCarSelected[item.id])">
            </mt-switch>

     // 改變商品選中
        selectedChange(id,newVal) {
          console.log(id+'---'+newVal)
          this.$store.commit('updateShopCarSelected',{ id , selected : newVal })
        }

九、勾選數量和總價的計算

getters中

// 得到 總價 和 總量
  getShopCarAllPriceAndCount(state) {
    var Obj = {
      COUNT:0,  // 勾選的數量
      PRICE:0   // 勾選的總價
    };
    state.shopCar.forEach(item => {
      if (item.selected) { // 被勾選
        Obj.COUNT += item.count;
        Obj.PRICE += item.price * item.count
      }
    });
    return Obj
  }

shopcar頁面

              <p>
                已選 <span class="red">{{ $store.getters.getShopCarAllPriceAndCount.COUNT }}</span> 件，總價
                <span class="red">￥{{ $store.getters.getShopCarAllPriceAndCount.PRICE }}</span>（不含運費）
              </p>