在日常 Web 开发中，购物车功能是一个常见的需求。Vue + Vuex 是现代前端开发中较为流行的技术栈之一，其也非常适合用来实现购物车功能。本文将详细介绍 Vue + Vuex 中如何实现购物车功能，并提供示例代码以供学习和参考。
一、Vuex 简介
Vuex 是一个为 Vue.js 应用程序开发的状态管理模式。它集中式地存储了所有组件的状态，并以可预测的方式进行修改。通过使用 Vuex，组件之间可以轻松地共享状态、避免了 Props 属性传递和事件总线等传统解决方案的繁琐操作，让状态管理更加高效易用。
二、实现购物车功能的思路
首先，我们需要明确购物车功能需要存储哪些数据。一般来说，购物车中需要存储商品信息，包括名称、价格、数量等。另外，为了方便用户与操作，购物车还需要维护一些辅助信息，比如产品图片、总价、购物车状态等等。因此，在 Vuex 中实现购物车功能需要考虑以下几个方面的内容：
- 定义购物车的状态信息，包括商品信息和辅助信息；
- 实现添加商品至购物车功能；
- 实现从购物车中删除商品功能；
- 实现修改购物车中商品数量功能；
- 计算购物车中商品总价；
- 根据购物车状态展示不同的界面。
接下来，我们将逐一介绍如何在 Vuex 中实现以上功能。
三、定义购物车的状态信息
在 Vuex 中，我们可以通过 state 对象来存储应用程序的状态信息。因此，我们可以在 state 中定义一个 cart 对象来存储购物车的相关信息。购物车中需要存储的信息包括商品的 id、名称、价格、数量等等。另外，为了方便计算购物车商品总价，我们再添加一个 totalPrice 属性来存储购物车中所有商品的总价。
示例如下：
----- ----- - -
----- -
------ --- -- ----
----------- - -- ----
-
-购物车中的商品列表应当是一个数组，因为购物车中可以添加多个商品。
四、实现添加商品至购物车功能
Vuex 中的 actions 可以用来封装异步操作，比如从后台获取商品信息。在这里，我们使用 mutations 来实现添加商品至购物车的操作。因为 mutations 操作必须是同步的，但这需要我们追加新的商品数据到 state 的数组中，这个过程是异步的。所以，我们需要一些技巧来让 mutations 可以执行这个异步操作，这里我们采用 Promise 来实现。
----- --------- - -
--------- ------- -------- -
--- ---- - -------------------------- -- ------- --- -----------
-- ------ -
---------------
- ---- -
--------------------------------------- -------- - --------- - ---
-
--------------------- -- -------------
-
-当用户点击页面中的添加到购物车按钮时，我们会向 addToCart 方法传递一个 payload 对象，该对象包含商品的所有信息。在 addToCart 方法中，我们首先通过商品的 id 查找购物车中是否已有该商品，如果有就将其数量加一，如果没有就将其加入购物车。无论是添加还是修改商品数量，都需要更新购物车中所有商品的总价。
五、实现从购物车中删除商品功能
从购物车中删除商品也是购物车功能中的一个常见操作。实现方式与添加商品类似，只是需要将商品从购物车的商品列表中移除。
----- --------- - -
-------------- ------- -------- -
--- ----- - ------------------------------- -- ------- --- -----------
--- ---- - -----------------------
-- -------------- - -- -
---------------
- ---- -
------------------------------ --
-
--------------------- -- ----------
-
-在 removeFromCart 方法中，我们首先查找购物车中是否有该商品，如果有，就将其数量减一；如果商品数量已经为1，则从购物车中将其移除。
六、实现修改购物车中商品数量功能
Vue 双向数据绑定的优秀特性，使得我们可以轻松实现修改购物车中商品数量的功能。
----- --------- - -
-------------- ------- -------- -
--- ---- - -------------------------- -- ------- --- -----------
--- ---- - ---------------- - -------------
------------- - ----------------
--------------------- -- ----- - -----------
-
-在 updateQuantity 方法中，我们首先查找购物车中需要修改数量的商品，然后计算出数量变化量 diff，更新商品的数量以及购物车的总价。需要注意的是，我们在这里并没有直接将商品的数量设置为书输入框中的值，而是计算了一个数量变化量，再根据其对商品的数量进行更新。这个做法比较好的解决了异步问题，同时也避免了滥用 watch 监听器的情况。
七、计算购物车中商品总价
我们需要实时地计算购物车中所有商品的总价，以便在购物车界面向用户展示。
----- ------- - - ----------- ----- -- --------------------- -
在 getters 中定义了一个 totalPrice 属性，以便在其他组件中可以直接通过 this.$store.getters.totalPrice 来使用该属性。
八、根据购物车状态展示不同的界面
最后一个功能是，根据购物车是否为空，来展示不同的页面。这可以通过计算属性来实现。
----- ------- - - ---------- ----- -- ----------------------- --- - -
在 getters 中我们定义了一个 emptyCart 计算属性，用于判断购物车是否为空。在购物车组件内部，我们可以通过 this.$store.getters.emptyCart 来获取该值，并据此在页面中展示不同的内容。
九、完整示例代码
下面是以上所有代码的完整示例代码：
----- ----- - -
----- -
------ --- -- ----
----------- - -- ----
-
-
----- ------- - -
----------- ----- -- ----------------------
---------- ----- -- ----------------------- --- -
-
----- --------- - -
--------- ------- -------- -
--- ---- - -------------------------- -- ------- --- -----------
-- ------ -
---------------
- ---- -
--------------------------------------- -------- - --------- - ---
-
--------------------- -- -------------
--
-------------- ------- -------- -
--- ---- - -------------------------- -- ------- --- -----------
--- ---- - ---------------- - -------------
------------- - ----------------
--------------------- -- ----- - -----------
--
-------------- ------- -------- -
--- ----- - ------------------------------- -- ------- --- -----------
--- ---- - -----------------------
-- -------------- - -- -
---------------
- ---- -
------------------------------ --
-
--------------------- -- ----------
-
-
------ ------- -
------
--------
---------
-十、总结
通过以上学习，我们可以看到，使用 Vuex 来实现购物车功能非常方便，只需定义状态、mutations、getters 三个部分，就可以实现基本的购物车功能。在使用时，只需在组件中调用 mutations 方法来修改状态，同时使用计算属性和 getter，便可方便地取到所需的状态。当然，实际的开发中，还需要考虑一些细节问题，比如如何处理异步数据，如何处理数量变化时总价的计算（比如单价精度）等等。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6487c9b048841e9894656aec