Vue购物车(购物车进阶版)

效果流程

1. 我们在vue项目中views中创建两个组件一个购物页，一个购物车
2. 我们通过localStorage本地储存，来实现页面刷新不掉
3. 使用Vuex来进行传值
4. 使用Tap来实现切换和是筛选
5. 给我们加入购物画册女页的数据添加状态,判断是否选中
6. 通过状态来判断选中删除

代码实现流程

Vuex代码逻辑实现：

首先在vuex中通过localStoage来拿取本地数据，先创建一个空对象，来存放拿取的数据，在创建一个来访，我们添加购物车的数据，在创意两个空数组来存放我们的总价和总数量

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    goodsData:[],
    cartData:[],
    totalMount:0,
    totalPrice:0,
  },
  getters:{
   
  },
  mutations:{
    SET_DOODS_DATA(state,data){
      const {goodsData}=data;
      state.goodsData=goodsData;
    },
    SET_CART_DATA(state,data){
      const {cartData,totalmount,totalprice}=data
      state.cartData=cartData
      state.totalMount=totalmount
      state.totalPrice=totalprice
    },
  },
  actions:{
    setDoodsData({commit}){
      const goodsData=JSON.parse(localStorage.getItem('goodsData'))||[];
      commit('SET_DOODS_DATA',{goodsData})
    },
    setCratData({commit}){
      const cartData=JSON.parse(localStorage.getItem('cartData'))||[];
      const totalmount=JSON.parse(localStorage.getItem('totalmount'))||0;
      const totalprice=JSON.parse(localStorage.getItem('totalprice'))||0;
      commit('SET_CART_DATA',{
        cartData,
        totalmount,
        totalprice,
      })
    },
    
  },
  modules:{
   
  }
})

购物页效果实现：

首先页面跳转我们通过路由来实现，然后我们在computed中获取我们商品数据进行渲染，在生命周期函数created中异步拿取数据，让我们刷新之后利己执行，再过我们导航栏的数据加上状态，给它定义一个初始状态，最后通过switch来进行筛选，然后当我们点击加的时候给我们创建的购物车页里面添加数据

代码如下：

<template>
  <div class="page">
    <header>
      <router-link class="acrt" to="/cart">购物车</router-link>
      <span class="header-title">商品列表</span>
    </header>
    <div class="page-list">
      <div class="top-wrap">
        <ul>
          <li :class="{'tab-active':type==item.type}" v-for="item in Type" :key="item.id" @click="type=item.type">{
  {item.name}}</li>
        </ul>
      </div>  
    </div>
    <ul class="filter">
      <li :class="{'filter-title' :status=='all'}" @click="status='all'">综合排序</li>
      <li :class="{'filter-title' :status=='sales'}" @click="status='sales'">销量优先</li>
      <li :class="{'filter-title' :status=='priceMax'||status=='priceMin'}" @click="priceMaxMin">价格</li>
    </ul>
    <ul class="goods-list">
       <li class="goods-item" v-for="item in showGoods" :key="item.id">
          <div class="goods-img">