介绍
Vue.js 是一个轻量的，灵活的 JavaScript 前端框架，它提供了声明式渲染和组件化的开发方式。Vue.js 是一个快速上手的框架，但是在开发复杂应用的时候，可能需要一些额外的工具和库来管理应用的状态和路由等。
在本文中，我们将使用 Vuex 和 Vue.js Router 实现购物车页面，这将使我们更好地组织购物车的数据和逻辑，并为用户提供更好的用户体验。
购物车页面的需求
在购物车页面中，我们需要实现以下功能：
- 显示购物车中的所有商品
- 每个商品包含名称，图片，价格，数量和删除按钮
- 可以增加或减少商品的数量，以及删除商品
- 显示所有商品的总价
Vuex 简介
Vuex 是一个基于状态管理的库，它可以轻松管理大型应用程序的状态。Vuex 使用了一个中央存储仓库，该仓库存储了整个应用程序的状态。所有组件都可以访问该中央仓库中的状态，从而可以在整个应用程序中共享数据。
Vuex 的状态仓库有以下几个核心概念：
- State：用于存储应用程序的状态，即数据。
- Mutation：用于修改应用程序的状态（State）。
- Getter：用于从 State 中获取派生数据。
- Action：用于处理异步操作和提交 Mutations。
Vue.js Router 简介
Vue.js Router 是一个官方维护的库，它用于管理 Vue.js 应用程序中的路由。通过 Vue.js Router 可以实现页面之间的相互跳转，还可以帮助你实现更高级的路由功能，例如路由的过渡效果。
Vue.js Router 中有以下几个核心概念：
- Route：每个路由都会映射到一个路由对象（Route）。
- Router：Vue.js 应用程序的路由器，它允许您使用代码定义路由规则，以及在代码中导航到新的路由。
- Route Component：每个路由都可以映射到一个组件。
实战：购物车页面
项目结构
为了充分利用 Vuex 和 Vue.js Router，我们将结合使用这两种工具，开发购物车页面。购物车页面的项目结构如下：
-- -------------------- ---- ------- --- ---- - --- ----------- - - --- -------- -- ----- - - --- ----------- -- ---- - --- ------ - - --- ---------- -- ------ - - --- ---------- -- ------ - - --- -------- -- ---- -- - - --- ------------ -- -------- - - --- -------- -- ----- - --- --------- -- ------ ------ -- - --- ------- -- ------ -------- --- ------- -- ------ ---------
为了简化示例代码，我们将商品数据放在了本地存储中，但在真实项目中，我们应该通过 API 从服务器获取商品数据。
配置 Vue.js Router
首先，我们需要在 ./src/router.js 中定义路由规则。在购物车页面中，我们需要定义一个路由规则，该规则将导航到 Cart.vue 购物车组件。
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- -------------------
---------------
------ ------- --- --------
------- -
-
----- --------
----- -------
---------- ----
-
-
--上述代码定义了一个路由规则，当访问路径 /cart 时，将渲染 Cart.vue 购物车组件。
创建 Vuex 状态管理
我们将使用 Vuex 进行状态管理，以便更好地组织购物车数据和逻辑。在 ./src/store/index.js 中，我们将使用以下代码导入 Vuex 和创建 Vuex 实例：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------ ----- ---- --------- ------ ------- ---- ----------- ------ ------- ---- ----------- ------ --------- ---- ------------- ------------- ------ ------- --- ------------ ------ -------- -------- --------- --
上述代码定义了一个 Vuex 实例并将 State、Getter、Action 和 Mutation 导入其中。每个模块将在稍后进行单独的讲解。
定义 State
在 ./src/store/state.js 中，我们定义了一个购物车的初始状态：
export default {
products: []
}在购物车中，每个商品都将存储在 Vuex 的状态中。
定义 Getter
Getter 用于从 State 中获取派生数据，例如购物车中所有商品的总价。在 ./src/store/getters.js 中，我们定义了 cartTotalPrice Getter：
export default {
cartTotalPrice: state => {
return state.products.reduce((total, product) => {
return total + (product.price * product.quantity)
}, 0)
}
}上述代码遍历购物车中的所有商品，并计算它们的总价。
定义 Mutation
Mutation 用于修改应用程序的状态（State）。在 ./src/store/mutations.js 中，我们定义了添加商品、删除商品和更新商品数量等操作的 Mutation：
-- -------------------- ---- -------
------ ------- -
---------- ------- -------- -- -
--- ----------- - --------------------- -- ---- --- -----------
-- -------------- -
------------------------------------- -------- - --------- - ---
- ---- -
----------------------
-
--
--------------- ------- -------- -- -
--- ----------- - --------------------- -- ---- --- -----------
-- ------------ -- -------------------- - -- -
----------------------
-
--
-------------------------- ------- -------- -- -
--- ----------- - --------------------- -- ---- --- -----------
-- ------------- -
-------------------- - ----------------
-
-
-上述代码分别实现了以下功能：
- 添加商品到购物车；
- 从购物车中删除商品；
- 更新购物车中商品的数量。
定义 Action
Action 用于处理异步操作和提交 Mutations。在 ./src/store/actions.js 中，我们定义了处理添加商品和删除商品的 Action：
export default {
addToCart: ({ commit }, product) => {
commit('addToCart', product)
},
removeFromCart: ({ commit }, product) => {
commit('removeFromCart', product)
}
}实现购物车页面
现在我们可以开始实现购物车页面了。
我们将使用 ./src/components/Product.vue 组件显示商品：
-- -------------------- ---- -------
----------
---- ----------------
---- -------------------- ------------------- --
------ ------------ -------
----- ------------- ------
---- -----------------
------- ------------------ --------------------------- -- -------------
-------- ---------------- ---------
------- -----------------------------
------
------- ---------------------- -- -------------
------
-----------
--------
------ ------- -
------ ------------
-------- -
----------- -
-----------------------
--
----------- -
-- ---------------------- - -- -
-----------------------
-
--
----------- -
--------------------------------- -------------
-
-
-
---------上述代码包含了以下功能：
- 显示商品的名称、价格、图片和数量；
- 可以增加或减少商品的数量；
- 可以将商品添加到购物车。
我们将使用 ./src/components/Cart.vue 组件显示购物车：
-- -------------------- ---- -------
----------
---- -------------
------------ ---------
---- -----------------
---- -------------- -- --------- ----------------- ----------------
---- -------------------- ------------------- --
------ ------------ -------
----- ------------- ------
---- -----------------
------- --------------------------------------
-------- ---------------- ---------
------- --------------------------------------
------
------- ------------------------------------------------
------
------
-------- ------ -- -------------- ------
------
-----------
--------
------ - --------- ----------- ---------- - ---- ------
------ ------- -
--------- -
-------------
--------- ----- -- --------------
---
---------------
--------------- ----------------
--
--
-------- -
---------------
--------------- ----------------
---
------------------ -
------------------
----------------------------------------------- -
--- -----------
--------- ----------------
--
--
------------------ -
------------------
----------------------------------------------- -
--- -----------
--------- ----------------
--
-
-
-
---------上述代码包含了以下功能：
- 显示购物车中的所有商品，以及每个商品的名称、价格、图片和数量；
- 可以增加或减少购物车中商品的数量；
- 可以从购物车中删除商品；
- 显示所有商品的总价。
测试
现在可以测试购物车功能了。
首先在 ./src/App.vue 中，导入 ./src/components/Product.vue 组件，然后渲染它：
-- -------------------- ---- -------
----------
---- ---------
------------ ------------------- ------------------
---- -----------------
---- -------------- -- --------- ------------------
-------- ------------------ --
------
------
------
-----------
--------
------ ------- ---- ----------------------
------ ------- -
----------- -
-------
--
--------- -
---------- -
------ --------------------------------------------
-
--
--------- -
---------------------
-----------
----------------
-
--- --
----- -------- ---
------ -----
------ --------------------------------------
--------- -
--
-
--- --
----- -------- ---
------ -----
------ --------------------------------------
--------- -
--
-
--- --
----- -------- ---
------ -----
------ --------------------------------------
--------- -
--
-
--- --
----- -------- ---
------ -----
------ --------------------------------------
--------- -
--
-
--- --
----- -------- ---
------ -----
------ --------------------------------------
--------- -
-
--
-
-
-
---------上述代码渲染了商品列表，并将数据存储在本地存储中。
现在可以执行 npm run serve 启动应用程序，在浏览器中访问 http://localhost:8080/ 即可查看商品列表。单击商品的“Add to cart”按钮，该商品将自动添加到购物车中。单击路由链接中的“Shopping Cart”时，将显示购物车，其中包含所有从商品列表中添加到购物车中的商品。
总结
本文详细介绍了在 Vue.js 应用程序中使用 Vuex 和 Vue.js Router 实现购物车页面的方法。我们学习了 Vuex 状态管理库的核心概念，包括 State、Mutation、Getter 和 Action，并使用 Vue.js Router 实现了页面之间的导航。最后，我们编写并测试了购物车页面的样例代码。购物车页面是一个非常常见的功能，使用 Vuex 和 Vue.js Router 实现购物车页面可以使代码更加标准化、简化和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b26af648841e9894ea4b5b