Vuex案例-购物车

已于 2022-08-30 16:32:58 修改
阅读量1.9k 收藏 17
点赞数 2
分类专栏： 大前端学习笔记 vue 前端开发 文章标签： vue
于 2021-01-27 09:09:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32090185/article/details/113238635
版权

Study Notes

案例-购物车

购物车 Demo，带你理解并使用 vuex 状态管理

目录结构

在这里插入图片描述

效果展示

在这里插入图片描述

功能介绍

  • 首页
    • 获取并展示商品列表
    • 添加商品到购物车
    • 展示购物车中商品总数
  • 购物车
    • 更新购物车中的商品数据
    • 更新商品选中状态
    • 计算选中商品数量、合计商品价格
    • 全选、单选
    • 删除购物车中的商品
    • 本地缓存 vuex 状态

接单

小编承接外包，有意者可加
QQ：1944300940
在这里插入图片描述

微信号：wxid_g8o2y9ninzpp12
在这里插入图片描述

功能开发

Vuex 中创建两个模块，分别用来记录商品列表和购物车的状态，store 的结构：

└───store
    ├───modules
    │   └───cart.js
    │   └───production.js
    └───index.js

视图结构

└───view
    ├───cart
    │   └───index.vue
    └───home
        └───index.vue

首页

production.js

/**
 * @author Wuner
 * @date 2020/8/20 16:39
 * @description
 */
const state = {
  // 商品数组
  productions: [],
};
const getters = {};
const mutations = {
  /**
   * 设置商品数组
   * @param state
   * @param payload
   */
  setProductions(state, payload) {
    state.productions = payload.map((val) => {
      // 价格保留两位小数
      val.price = val.price.toFixed(2);
      return val;
    });
  },
};
const actions = {
  /**
   * 调用接口获取商品
   * @param commit
   * @returns {Promise<void>}
   */
  async getProductions({ commit }) {
    const result = await this._vm.$http.get(
      `http://${process.env.HOST}:3000/products`,
      {},
    );
    commit('setProductions', result);
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

cart.js

/**
 * @author Wuner
 * @date 2020/8/20 16:39
 * @description
 */

const state = {
  // 购物车商品数组
  productionsCart: [],
};
const getters = {
  /**
   * 商品总数
   * @param state
   * @returns {number}
   */
  totalCount(state) {
    return state.productionsCart.reduce((sum, { count }) => sum + count, 0);
  },
};
const mutations = {
  /**
   * 将商品添加到购物车
   * @param state
   * @param payload
   */
  addToCarts(state, payload) {
    let production = state.productionsCart.find(
      (value) => value.id === payload.id,
    );
    // 1. productionsCart 中没有该商品，把该商品添加到数组，并增加 count，isChecked，totalPrice
    // 2. cartProducts 有该商品，让商品的数量加payload.count，选中，计算小计
    // 3. 计算小计时，保留两位小数
    if (production) {
      production.count = production.count += payload.count;
      production.isChecked = true;
      production.totalPrice = (production.price * production.count).toFixed(2);
    } else {
      state.productionsCart.push({
        ...payload,
        isChecked: true,
        totalPrice: (payload.price * payload.count).toFixed(2),
      });
    }
  },
};
const actions = {};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

home/index.vue

<template>
  <div class="home">
    <van-nav-bar title="首页" fixed placeholder>
      <template slot="right">
        <van-icon
          size="24"
          name="cart-o"
          @click="$router.push('cart')"
          :badge="totalCount || ''"
        />
      </template>
    </van-nav-bar>
    <div v-for="(item, index) in productions" :key="item.id" class="home-card">
      <van-card
        :num="nums[index]"
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="item.thumb"
      >
        <template slot="footer">
          <div class="home-card-footer">
            <van-stepper v-model="nums[index]" />
            <van-button @click="addCart(item, index)" icon="cart-o" size="mini">
              加入购物车
            </van-button>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';

export default {
  data() {
    return {
      nums: [],
    };
  },
  methods: {
    // 使用 action 辅助函数
    // 映射 this.getProductions() 为 this.$store.dispatch('production/getProductions')
    ...mapActions('production', ['getProductions']),
    // 使用 mutation 辅助函数
    // 映射 this.addToCarts() 为 this.$store.commit('cart/addToCarts')
    ...mapMutations('cart', ['addToCarts']),
    // 添加商品到购物车
    addCart(item, index) {
      let count = this.nums[index];
      // 将商品数量置为1
      this.nums.splice(index, 1, 1);
      // 以载荷方式提交
      this.addToCarts({ ...item, count });
    },
    // 初始化商品数据
    initData() {
      // 获取商品列表数据
      this.getProductions();
      // 初始化商品步进器数值
      this.productions.forEach(() => this.nums.push(1));
    },
  },
  created() {
    this.initData();
  },
  mounted() {},
  computed: {
    // 使用 state 辅助函数
    // 映射 this.productions 为 this.$store.state.production.productions
    ...mapState('production', ['productions']),
    // 使用 getter 辅助函数
    // 映射 this.totalCount 为 this.$store.getters['cart/totalCount']
    ...mapGetters('cart', ['totalCount']),
  },
};
</script>
<style scoped lang="less">
.home {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;

  &-card {
    margin: 10px 16px 0 16px;

    .van-card {
      border-radius: 8px;
    }

    &-footer {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
</style>

购物车

cart.js

/**
 * @author Wuner
 * @date 2020/8/20 16:39
 * @description
 */
import Local from '../../utils/local';

const state = {
  // 购物车商品数组
  productionsCart: Local.get('productionsCart') || [],
};
const getters = {
  /**
   * 是否选中所有商品
   * @param state
   * @returns {boolean}
   */
  isAllChecked(state) {
    let result = true;
    for (let production of state.productionsCart) {
      // 当购物车中有一个商品未选中，就返回false
      if (!production.isChecked) {
        result = false;
        break;
      }
    }
    return result;
  },
  /**
   * 商品总数
   * @param state
   * @returns {number}
   */
  totalCount(state) {
    return state.productionsCart.reduce((sum, { count }) => sum + count, 0);
  },
  /**
   * 选中商品的总数
   * @param state
   * @returns {number}
   */
  checkedCount(state) {
    return state.productionsCart.reduce(
      (sum, { count, isChecked }) => (isChecked ? sum + count : sum),
      0,
    );
  },
  /**
   * 选中商品的价格合计
   * @param state
   * @returns {number}
   */
  checkedPrice(state) {
    return state.productionsCart.reduce(
      (sum, { totalPrice, isChecked }) =>
        isChecked ? sum + totalPrice * 100 : sum,
      0,
    );
  },
};
const mutations = {
  /**
   * 更新商品的选中状态
   * @param state
   * @param payload
   */
  updateProductionChecked(state, payload) {
    // 全选
    if (payload.all) {
      state.productionsCart.forEach(
        (production) => (production.isChecked = payload.isChecked),
      );
    } else {
      // 单选
      let production = state.productionsCart.find(
        (value) => value.id === payload.id,
      );
      production && (production.isChecked = !payload.isChecked);
    }
  },
  /**
   * 更新购物车中的商品数据
   * @param state
   * @param payload
   */
  updateProduction(state, payload) {
    let production = state.productionsCart.find(
      (value) => value.id === payload.id,
    );
    production.count = payload.count;
    production.totalPrice = (production.count * production.price).toFixed(2);
  },
  /**
   * 将商品添加到购物车
   * @param state
   * @param payload
   */
  addToCarts(state, payload) {
    let production = state.productionsCart.find(
      (value) => value.id === payload.id,
    );
    // 1. productionsCart 中没有该商品，把该商品添加到数组，并增加 count，isChecked，totalPrice
    // 2. cartProducts 有该商品，让商品的数量加payload.count，选中，计算小计
    // 3. 计算小计时，保留两位小数
    if (production) {
      production.count = production.count += payload.count;
      production.isChecked = true;
      production.totalPrice = (production.price * production.count).toFixed(2);
    } else {
      state.productionsCart.push({
        ...payload,
        isChecked: true,
        totalPrice: (payload.price * payload.count).toFixed(2),
      });
    }
  },
  /**
   * 移除购物车中的商品
   * @param state
   * @param payload
   */
  removeFromCarts(state, payload) {
    let index = state.productionsCart.findIndex(
      (value) => value.id === payload,
    );
    index >= 0 && state.productionsCart.splice(index, 1);
  },
};
const actions = {};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};

cart/index.vue

<template>
  <div class="cart">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="购物车"
      fixed
      placeholder
    />
    <div v-for="item in productionsCart" :key="item.id" class="cart-card">
      <van-swipe-cell>
        <van-card
          :num="item.num"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.thumb"
        >
          <template slot="footer">
            <div class="cart-card-footer">
              <div class="cart-card-footer-left">
                <van-checkbox
                  @click="updateProductionChecked(item)"
                  :value="item.isChecked"
                  :name="item.id"
                />
                <span class="total-price">小计: ￥{{ item.totalPrice }}</span>
              </div>
              <van-stepper
                @change="onChange($event, item.id)"
                :default-value="item.count"
              />
            </div>
          </template>
        </van-card>
        <template slot="right">
          <van-button
            @click="removeFromCarts(item.id)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>
    <van-submit-bar
      :price="checkedPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        @click="
          updateProductionChecked({ all: true, isChecked: !isAllChecked })
        "
        :value="isAllChecked"
      >
        全选
      </van-checkbox>
      <template slot="tip">
        <span
          >已选 <span>{{ checkedCount }}</span> 件商品</span
        >
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex';

export default {
  data() {
    return {};
  },
  methods: {
    // 使用 mutation 辅助函数
    // 映射 this.updateProduction() 为 this.$store.commit('cart/updateProduction')
    // 映射 this.updateProductionChecked() 为 this.$store.commit('cart/updateProductionChecked')
    // 映射 this.removeFromCarts() 为 this.$store.commit('cart/removeFromCarts')
    ...mapMutations('cart', [
      'updateProduction',
      'updateProductionChecked',
      'removeFromCarts',
    ]),
    onSubmit() {},
    // 监听步进器数据改变，更新购物车中的商品数据
    onChange(count, id) {
      typeof count === 'number' && this.updateProduction({ count, id });
    },
  },
  created() {},
  mounted() {},
  computed: {
    // 使用 state 辅助函数
    // 映射 this.productionsCart 为 this.$store.state.cart.productionsCart
    ...mapState('cart', ['productionsCart']),
    // 使用 getter 辅助函数
    // 映射 this.isAllChecked 为 this.$store.getters['cart/isAllChecked']
    // 映射 this.checkedCount 为 this.$store.getters['cart/checkedCount']
    // 映射 this.checkedPrice 为 this.$store.getters['cart/checkedPrice']
    ...mapGetters('cart', ['isAllChecked', 'checkedCount', 'checkedPrice']),
  },
};
</script>
<style scoped lang="less">
.cart {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #f5f5f5;

  &-card {
    margin: 10px 16px 0 16px;

    .van-card {
      border-radius: 8px;
    }

    &-footer {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-left {
        display: flex;
        align-items: center;

        .total-price {
          margin-left: 16px;
          color: #ee0a24;
          font-size: 14px;
        }
      }
    }

    .delete-button {
      height: 100%;
    }
  }
}
</style>

本地缓存购物车 vuex 状态

store/index.js

/**
 * @author Wuner
 * @date 2020/8/20 16:38
 * @description
 */
import Vuex from 'vuex';
import Vue from 'vue';
import production from './modules/production';
import cart from './modules/cart';

Vue.use(Vuex);
import Local from '../utils/local';

const myPlugin = (store) => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
    // 缓存cart模块状态
    mutation.type.startsWith('cart/') &&
      Local.set('productionsCart', state.cart.productionsCart);
  });
};

const state = {};
const getters = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
  // 非生产环境添加严格模式
  strict: process.env.NODE_ENV !== 'production',
  state,
  getters,
  mutations,
  actions,
  // 模块
  modules: {
    production,
    cart,
  },
  // 插件
  plugins: [myPlugin],
});

export default store;

demo 源码地址

下一篇——Vuex 模拟实现

白驹过隙时光荏苒
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vueX多模块---简易购物车案例
weixin_43117402的博客
04-27 768
多个模块的使用，这在企业中也是常见的情况，我们通过商品添加到购物车的案例来分析一下 如上，一个简易版的商品购买的案例，Products 列表显示的是商品信息，点击 Add to cart 的时候执行添加到购物车，购物车数据会自动更新 以这个案例来说，商品和购物车实际上是两个独立的对象，后台也会有两个不同的 API 来处理 API 1. products Request GET https://w...
Vue.js 框架源码与进阶 - Vuex 状态管理 - 购物车案例
时光海的博客
12-31 802
Vuex 状态管理 - 购物车案例8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储 8.4 Vuex 购物车案例 接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式，首先把购物车的 项目模板 下载下来。 案例演示 模板 商品列表 添加购物车 我的购物车 - 列表 我的购物车 - 统计 我的购物车 - 删除 购物车组件 - 购物车列表 购物车组件 - 统计 本地存储
使用Vuex实现购物车
ch_s_t的专栏
06-06 551
使用时，需要将商品列表组件Product.vue和购物车列表组件Cart.vue在App.vue中引入，并在Vuex的store文件夹下的cart.js中定义好商品数据 all_products和已添加到购物车的商品数据selected，然后将该模块放入index.js文件的modules对象中，将数据通过getters导出，将方法通过actions和mutations导出。当进行一些小项目开发时，涉及组件传值时，或者项目非常小，组件间共享状态不多的情况下，此时可以使用简单的store模式或者其它方式。
利用vuex实现购物车案列
m0_49014420的博客
11-27 624
【代码】利用vuex实现购物车案列。
vue学习日记10:综合案例-购物车
yinfanfff的博客
03-19 413
（2）展示 减到1就不能再减，点击删除直接删除 这里写三元表达式也可以 三元表达式是一种在许多编程语言中常见的条件表达式，它由三个操作数组成：一个条件表达式、一个真值表达式和一个假值表达式。其一般形式为： 如果写成if...else 三元写法 被勾选的被计算 5.持久化本地如果用户对其操作之后 没有持久化刷新后就会成问题（1）代码 如果没有 || （defaultArr）清除缓存后就会null崩溃 ，加上之后就会默认回到初试页面了（2）展示
vuex简单理解---简易vuex构造购物车
TeroZhang的博客
09-17 1268
vuex的基本概念 学习笔记： 采用 集中式存储 管理模式。用来管理所有组件的状态，并以相应的规则保证状态一种可预测的方式发生变化。 什么是状态模式管理? new Vue({ // state 驱动应用的数据源 data(){ return { count:0 } }, // view 以声明的方式，将 state 映射到视图 template:...
vuex购物车案例
ioncannontic的博客
03-16 472
vuex购物车案例
【Vue】购物车 - 构建 vuex 模块 - 获取数据存储
qq_39921135的博客
06-13 169
【代码】【Vue】购物车 - 构建 vuex 模块 - 获取数据存储。
Vue小案例-购物车案例(知识点:json-server,vuex,axios,组件通信和数组方法find，reduce)
a4867的博客
05-26 1201
小案例设计知识点蛮多，日后需要时候方便找，也算一个巩固。虽然这个小案例比较简单，但是设计的知识点还是蛮多，如json-server,vuex,axios，组件通信和一些数组的常用方法，非常利用巩固学习。
vue核心技术（二）综合案例-购物车
02-11
在本篇中，我们将深入探讨Vue.js核心技术在创建一个综合购物车案例中的应用。Vue.js是一个流行的前端JavaScript框架，以其易学易用、组件化开发和高性能的特点深受开发者喜爱。在"vue核心技术（二）综合案例-购物车...
vuex实现的简单购物车功能示例
10-17
主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下
微信小程序开发-仿同乐居商城-购物车合算案例源码.zip
11-21
对于购物车中的商品列表，可能需要一个全局的状态管理方案，例如使用Vuex的思想或者微信小程序自带的全局数据管理机制。 9. **计算逻辑**： 购物车合算涉及到复杂的计算逻辑，包括商品数量的增减、优惠策略的处理...
使用vuex较为优雅的实现一个购物车功能的示例代码
12-13
这里需要提一点就是，如果不存在多组件共同管理的状态，最好是不用vuex管理，vuex是用来管理多组件共同状态的，单单只需要实现跨组件、隔代组件通信的话，使用eventbus，provide/inject等就可以实现。 Vuex修改数据...
案例：购物车案例模块-全选
01-18
- **前端状态管理**：如果购物车数据存储在前端，例如使用Vuex（Vue.js的应用状态管理库）或Redux（React的状态容器），全选功能需要更新相关状态，并确保页面显示与用户操作一致。 - **后端通信**：当用户选择...
Android上传单文件和多文件（后台使用MultipartFile）
热门推荐
qq_32090185的博客
01-21 1万+
android代码： package heath.com.microchat.utils; import android.util.Log; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.HttpStatus; import org.apach...
Android聊天软件开发（基于网易云IM即时通讯）——环境搭建（一）
qq_32090185的博客
04-15 1万+
去网易云注册账号并登陆 https://app.yunxin.163.com/index?clueFrom=nim&from=nim#/create 添加依赖 ndk { //设置支持的SO库架构 abiFilters "armeabi-v7a", "x86","arm64-v8a","x86_64" } implementation fileTree(d...
Android聊天软件开发（基于网易云IM即时通讯）——发送视频消息（六）
qq_32090185的博客
06-14 1万+
这次我们需要接入视频播放器的jar包 //视频播放 api('com.shuyu:GSYVideoPlayer:6.0.1') { exclude group: 'com.android.support:appcompat-v7:27.0.0' } api('com.shuyu:gsyVideoPlayer-java:6.0.1') { ...
vuex购物车案例代码
最新发布
06-21
下面是一个简单的 Vue.js 和 Vuex 购物车案例代码概览： ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { cart: [],...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白驹过隙时光荏苒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值