vue+vuex实现响应式布局加购物车简单案例

哈喽，我又来了，vue想必大家都用的挺多的，所以，今天就用vue和vuex来写一个案例，那么，闲话不多说，我们就开始吧！
在写之前，想必大家对购物车这一电商案例会有很多的经历吧，那今天就写个购物车案例吧！为了增加点难度，我会加入响应式布局，代码如下：

//home
<template>
  <div class="home">
    <div class="home_header">
      <div>admin</div>
      <div>logout</div>
      <div @click="addCartClick">
        <img src="../assets/gouwuche.png" alt/>
      </div>
    </div>
    <div class="home_price_con">
      <div class="home_price">
        <div>
          sort by:
          <span>Default</span>
        </div>
        <div @click="defalut">
          price
          <span
            v-for="(item,index) in option"
            :key="index"
          >{
   {
   value===0?item.title1:item.title}}</span>
        </div>
      </div>
    </div>
    <div class="home_price_con_active">
      <div class="home_price_active">
        <div @click="defalut">
          <span>Default</span>
          price
          <span
            v-for="(item,index) in option"
            :key="index"
          >{
   {
   value===0?item.title1:item.title}}</span>
        </div>
        <div>sort by:</div>
      </div>
    </div>
    <div class="home_content_con">
      <div class="home_content">
        <div class="home_left">
          <h3>PRICE</h3>
          <div
            v-for="(item,index) in filter"
            :key="index"
            :class="selectIndex===index?'home_left_item_active':'home_left_item' "
            @click="onClick(index,item)"
          >{
   {
   item.title}}</div>
        </div>
        <div class="home_right">
          <el-row
            :gutter="15"
          >
            <el-col
              :xs="24"
              :sm="8"
              :md="8"
              :lg="6"
              :xl="6"
              v-for="(element,index) in items"
              :key="index"
            >
              <div class="item_conetent">
                <div class="item_content_image">
                  <img :src="element.productImage" alt />
                </div>
                <div class="item_content_name_price">
                  <div>{
   {
   element.productName}}</div>
                  <div class="item_content_price">￥{
   {
   element.salePrice}}</div>
                </div>
                <div class="home_list_item_button">
                  <button @click="addCart(element)">加入购物车</button>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="home_loading" v-show="isShow">
      <img src="../assets/loading2.gif" alt="" />
    </div>
    <div v-show="show" class="home_loadings">
      <img src="../assets/640.webp" alt="" />
      <button @click="onClicked">点击取消</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
   
  name: "Home",
  components: {
   },
  data() {
   
    return {
   
      filter: [],
      list: [],
      items: [],
      selectIndex: 0,
      option: [{
    title1: "↑" }, {
    title: "↓" }],
      value: 0,
      isShow:false,
      temps:false,
      show:false,
    };
  },
  methods: {
   
    onClick(index, item) {
   
      // console.log(item);
      this.selectIndex = index;
      var temp = [];
      if (item.title == "ALL") {
   
        temp = this.list;
      } else {
   
        this.list.forEach(ele => {
   
          if (ele.salePrice <= item.high && ele.salePrice > item.low) {