07——vue企業級電商系統(購物車頁面)

一些知識點！
1、vue query傳參刷新後數據變成"[Object Object]" 怎麼辦？
2、vuejs幾種不同組件（頁面）間傳值的方式
3、localStorage 存數組
4、把數組存到vuex的state中，並用localStorage長期緩存

  computed:{
    //是否全選
    checkAllFlag(){
      //當數組中所有對象都返回true時，整體纔會返回true
      return this.cartList.every((item)=>{
        return item.checked;
      })
    },
    //購物車列表
    cartList(){
      console.log(this.$store.state.cartList)
      console.log(localStorage.cartList)
      console.log(JSON.stringify(this.$store.state.cartList))
      localStorage.cartList=JSON.stringify(this.$store.state.cartList)
      // return JSON.parse(localStorage.cartList)
      return this.$store.state.cartList
    },
    //計算總價格
    totalPrice(){
      let money =0;
      this.cartList.forEach((item)=>{
        if(item.checked){
          money+=item.productPrice*item.quantity;
        }
      })
      return money;
    },
    //已選商品數量
    checkedNum(){
      return this.cartList.filter(item=>item.checked).length;
    }
  },
  //過濾器
  filters:{
    currency(value){
      if(!value) return 0.00;
      return '￥' + value.toFixed(2) + '元';
    }
  },
  methods:{
    editCart(type,item){  //添加
      console.log(type)
      console.log(item.checked)
      if(type=='add'){
        if(item.quantity == 10){
          alert('購買不允許超過10件')
        }else{
          item.quantity++;
        }
      }else if(type=='minus'){  //減少
        if(item.quantity == 1){
          alert('商品至少保留一件')
        }else{
          item.quantity--;
        }
      }else{  //是否勾選
        item.checked=!item.checked;
      }
      console.log(item.checked)
    },
    // 購物車下單
    order(){
      if(this.checkedNum){
        this.$router.push('/order/confirm');
      }
    },
    //是否全選
    toggleAll(){
      let flag= !this.checkAllFlag;
      this.cartList.forEach((item)=>{
        item.checked=flag;
      })
    },
    //刪除數據：彈出確認彈框
    delCartConfim(item){
      this.delItem=item;
      this.showModal = true;
    },
    //刪除產品
    delProduct(){
      let delItem=this.delItem;
      this.cartList.forEach((item,index)=>{
        if(delItem.productId == item.productId){
          this.cartList.splice(index,1);
           this.showModal=false;
        }
      })
    }
  },