【three.js沉浸式商城】购物车板块实现逻辑 vuex

最新推荐文章于 2023-08-08 08:00:10 发布

EVELESLIE

最新推荐文章于 2023-08-08 08:00:10 发布

阅读量258

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/EVELESLIE/article/details/129302725

版权

文章介绍了如何利用Vuex进行状态管理，实现购物车功能，包括选中产品加入购物车、数量增减及总价动态计算。通过在Vuex的state、mutations和getters中定义相应逻辑，以及在产品页面和导航栏中绑定事件来更新购物车状态。

摘要由CSDN通过智能技术生成

具体实现功能：

1.选中产品时加入购物车，总价加上产品的价格

2.可以加减产品数量，这个时候总价格也会变换

3.当产品数量小于等于0时，从列表删除产品

实现思路：

使用vuex来进行购物车状态管理。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

首先新建store/index.js
在这里插入图片描述
创建购物车变量，包括总价计数、购物车列表

  state() {
    return {
      count: 0,
      isFullscreen: false,
      buycarts: [],
    };
  },

在mutation中写同步方法

// 计算同步方法
  mutations: {
    // payload表示第几个

    increment(state, payload) {
      state.count += payload;
    },
    setFullscreen(state, payload) {
      state.isFullscreen = payload;
    },
    // 点击加入购物车
    addBuycarts(state, payload) {
      state.buycarts.push(payload);
    },
    // 点击加数量
    addBuycartsNum(state, payload) {

      state.buycarts[payload].num++;
    },
    // 点击减数量，如果数量等于零，就从列表中删除
    minusBuycartsNum(state, payload) {
      state.buycarts[payload].num--;
      if (state.buycarts[payload].num == 0) {
        state.buycarts.splice(payload, 1);
      }
    },
  },

总价的计算写在getters里，相当于计算属性

// 计算属性
  getters: {
    totalPrice(state) {
      let total = state.buycarts.reduce((pre, item) => {
        return pre + item.price * item.num;
      }, 0);
      return total;
    },

  },

Vuex中的购物车计算逻辑就写完了，接下来是产品页面的实现。
在这里插入图片描述
创建加入购物车button，绑定addBuycart事件，这里用了.stop组织向上传递，为的是防止触发切换模型按钮。

          <!-- 阻止向上传递 -->
          <a-button type="primary" block @click.stop="addBuycart(prod)">
            <template #icon>
              <ShoppingCartOutlined></ShoppingCartOutlined>
            </template>
            加入购物车
          </a-button>

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

// 加入购物车按钮事件
function addBuycart(prod){
  let product = {...prod,num:1};
  let index = 0;
  // 判断是否重复点击，逻辑就是判断点击的id和购物车列表中有无相同
  let isExist = store.state.buycarts.some((item,i)=>{
    if(product.id == item.id){
      
      index = i;
      
      return true;
    }else{
      return false;
    }

  });
  // 相同的话直接执行数量增加事件
  if(isExist){
    store.commit("addBuycartsNum",index);
    

  }else{
    // 不相同则新建
    store.commit("addBuycarts",product);

  }
  
}

在这里插入图片描述
导航栏的购物车构建，点击＋则提交addBuycartsNum，➖则提交minusBuycartsNum

        <template #title>购物车</template>
        <a-menu-item-group title="购物商品">
          <a-menu-item v-for="(item, i) in store.state.buycarts" :key="item.id">
            <div class="prod-item">
              <div class="left">
                <img :src="item.imgsrc" :alt="item.title" />
              </div>
              <div class="middle">
                <div class="title">{{ item.title }}</div>
                <div class="content">
                  <span class="num">数量：{{ item.num }}</span>
                  <div class="control">
                    <span
                      class="btn"
                      @click.stop="store.commit('addBuycartsNum', i)"
                      >+</span
                    >
                    <span
                      class="btn"
                      @click.stop="store.commit('minusBuycartsNum', i)"
                      >-</span
                    >
                  </div>
                </div>
              </div>
              <div class="right">
                <div class="price">¥ {{ item.price * item.num }}</div>
              </div>
            </div>
          </a-menu-item>
          <a-menu-item key="totalPrice">
            <div class="total">
              <span>总价：</span>
              <span class="num"> ¥ {{ store.getters.totalPrice }}</span>
            </div>
          </a-menu-item>
        </a-menu-item-group>