介绍
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
中,我们定义了一个购物车的初始状态:
------ ------- - --------- -- -
在购物车中,每个商品都将存储在 Vuex 的状态中。
定义 Getter
Getter 用于从 State 中获取派生数据,例如购物车中所有商品的总价。在 ./src/store/getters.js
中,我们定义了 cartTotalPrice Getter:
------ ------- - --------------- ----- -- - ------ ----------------------------- -------- -- - ------ ----- - -------------- - ----------------- -- -- - -
上述代码遍历购物车中的所有商品,并计算它们的总价。
定义 Mutation
Mutation 用于修改应用程序的状态(State)。在 ./src/store/mutations.js
中,我们定义了添加商品、删除商品和更新商品数量等操作的 Mutation:
------ ------- - ---------- ------- -------- -- - --- ----------- - --------------------- -- ---- --- ----------- -- -------------- - ------------------------------------- -------- - --------- - --- - ---- - ---------------------- - -- --------------- ------- -------- -- - --- ----------- - --------------------- -- ---- --- ----------- -- ------------ -- -------------------- - -- - ---------------------- - -- -------------------------- ------- -------- -- - --- ----------- - --------------------- -- ---- --- ----------- -- ------------- - -------------------- - ---------------- - - -
上述代码分别实现了以下功能:
- 添加商品到购物车;
- 从购物车中删除商品;
- 更新购物车中商品的数量。
定义 Action
Action 用于处理异步操作和提交 Mutations。在 ./src/store/actions.js
中,我们定义了处理添加商品和删除商品的 Action:
------ ------- - ---------- -- ------ -- -------- -- - ------------------- -------- -- --------------- -- ------ -- -------- -- - ------------------------ -------- - -
实现购物车页面
现在我们可以开始实现购物车页面了。
我们将使用 ./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