Vuex 和 Vue.js Router 实现购物车页面实战

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

介绍

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

阅读全文

猜你喜欢

  • 基于 Sinon 和 Chai 的 JavaScript 测试教程

    在现代的 Web 开发中，测试已经成为了不可或缺的一部分。测试可以增加代码的可靠性，减少 bug 出现的概率，也可以帮助开发者更快速地发现问题并进行修复。在前端开发中，主要有两种测试：单元测试和端到端...

    1 年前
  • 通过 MongoDB Atlas 云服务学习 MongoDB

    前言 在前端开发中，不可避免地会涉及到数据库的操作。MongoDB 是一个开源的 NoSQL 数据库，被广泛用于各种 Web 应用程序中。相较于传统的关系型数据库，MongoDB 更加灵活，可扩展性强...

    1 年前
  • 使用 Windows 优化工具提高系统性能的技巧

    作为一名前端开发者，系统性能的稳定和流畅对于工作效率至关重要。而在 Windows 操作系统中，优化工具是提高系统性能的重要手段。本文将介绍一些常用的 Windows 优化工具，以及如何使用它们来提高...

    1 年前
  • AngularJS SPA 应用中如何实现良好的错误处理机制？

    在 AngularJS 单页应用程序中，即使互联网速度很快，也很难避免出错的情况。在构建AngularJS应用时，为了实现更好地用户体验和应用性能，我们需要实现一个良好的错误处理机制，以便及时发现问题...

    1 年前
  • Jest测试React组件的实践总结

    前言 Jest 是 Facebook 出品的一款 JavaScript 测试框架，具有简单、高效、快速等特点，并且特别适合用于测试 React 应用程序。在本篇文章中，我们将深入探讨 Jest 如何测...

    1 年前
  • Flask-RESTful 中使用 RxPY 实现异步 API

    Flask-RESTful 是一个方便、快捷、简单的 Flask 扩展，它可以帮助开发者快速构建 RESTful API。同时，RxPY 是 Python 的一个响应式编程库，它实现了观察者模式，提供...

    1 年前
  • 如何正确选择和使用 CSS Reset

    CSS Reset 是一种用于重置浏览器默认样式的技术，它可以帮助 Web 开发者更好地掌控页面样式，避免因为浏览器默认样式导致页面布局和样式效果不一致的问题。在前端开发中，CSS Reset 是非常...

    1 年前
  • PM2 管理服务的使用方法

    什么是 PM2？ PM2 是一个具有负载均衡功能的 Node.js 进程管理器，可以帮助我们管理 Node.js 应用程序运行的进程。除了进程管理之外，它还提供了监控、日志管理等功能。

    1 年前
  • PWA 技术如何实现在线和离线状态的切换

    PWA（Progressive Web App）是一种结合了 Web 和 native app 的技术方案，可以让 Web 应用具备类似 native app 的用户体验。

    1 年前
  • ECMAScript 2016 和微服务如何结合使用？

    在现代应用程序中，微服务往往是必不可少的，而 ECMAScript（简称 ES）2016 是 JavaScript 的一个新版本，其中包括了一些重要的新功能和改进。

    1 年前
  • 基于 AR 技术的无障碍导览系统设计及实现

    前言 现代社会，人们的生活离不开科技的支持。随着科技的发展，AR 技术越来越成熟，它不仅在游戏、教育和娱乐等领域得到了应用，还在日常生活中得到越来越广泛的应用。本文将介绍一种基于 AR 技术的无障碍导...

    1 年前
  • 如何在 Sequelize 中使用 MySQL 存储过程

    在实际的开发中，我们经常需要在数据库中使用存储过程来完成一些非常重要的业务逻辑，而 Sequelize 作为一款强大的 ORM 框架，也支持使用 MySQL 存储过程。

    1 年前
  • Babel 编译时遇到 "Error: INJECT_LOADER_FAILED"，如何解决？

    当我们在使用 Babel 进行代码编译的时候，有时会遇到 "Error: INJECT_LOADER_FAILED" 的错误提示。这个错误提示通常在 Babel 的配置文件中使用了某些模块，但这些模块...

    1 年前
  • Express.js 与 MongoDB：从本地连接到 Atlas 云

    在现代 Web 开发中，Express.js 是一个广受欢迎的 Node.js web 应用程序框架，而 MongoDB 是一个面向文档的 NoSQL 数据库。这两个技术在实现 Web 应用程序时经常...

    1 年前
  • Serverless 应用如何进行容器化？

    Serverless 技术的火热程度在不断升级，它使得开发工作变得更加高效、简单和快速。但是在一些场景下，我们需要对 Serverless 应用进行容器化，以便更好的管理和部署应用。

    1 年前
  • Next.js 中如何连接 MongoDB？

    在现代应用程序开发中，数据库的使用是至关重要的。作为一名前端开发人员，将MongoDB集成到Next.js应用程序中是一个很好的选择。本文将向你展示如何使用Next.js连接MongoDB数据库。

    1 年前
  • Redis 如何处理并发读写导致的竞争条件

    随着互联网的发展，越来越多的应用程序开始面临高并发的挑战。在这种情况下，处理并发读写导致的竞争条件变得尤为重要。Redis 作为一种高性能的内存数据库，提供了多种解决方法，可以有效地处理这种竞争条件。

    1 年前
  • Docker Swarm 之采坑实录：集群建立失败的解决方案！

    Docker Swarm 之采坑实录：集群建立失败的解决方案！ 在使用 Docker Swarm 建立集群时，会遇到很多误解和困难。本文将详细介绍我在使用 Docker Swarm 建立集群时所遇到的...

    1 年前
  • 自定义元素中使用 Stylus 预处理器的方法

    在前端开发中，我们经常会使用 CSS 来设置元素的样式。但是，随着项目的复杂和需求的多样化，纯 CSS 已经无法满足我们的需求。此时，我们需要使用一些工具来提高自己的工作效率，其中预处理器就是一种常用...

    1 年前
  • Promise 在大型项目中的应用技巧

    随着前端技术越来越先进，前端项目越来越复杂，我们不得不借助 Promise 这一工具来解决异步编程的问题。本文将探讨 Promise 在大型项目中的应用技巧，为大家提供一些深度的学习和指导意义。

    1 年前

相关推荐

    暂无文章