Vue.js 中使用 Vuex 对表单数据进行状态管理

在 Vue.js 应用中，表单是一个常见的组件。随着应用规模的增长，表单数据和逻辑变得越来越复杂，难以维护。Vuex 是 Vue.js 官方推荐的状态管理工具，它可以让我们更好地管理表单数据状态。

Vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它充当着多个组件共享状态的中央存储库。在Vuex中，数据都以 state 的形式存储，而所有组件都共享这一单一状态树。

此外，Vuex 还利用了单向数据流的概念，即用户操作触发 action 以进行 commit，mutation 修改 state。如下所示：

以上是一个简单的数据流示例。当用户点击一个按钮时，它会发送一个 Action。这将在 Store 中处理，并触发一个 Mutation 来更改 State 的值。这将更新所有在 State 中定义的组件和视图，从而看到新的更新。

在表单中使用 Vuex

对于一个具体的表单实例，在 Vuex 中构建它的状态分为两个层次：

  • 局部状态（Local State）：表单的非全局性属性，如输入框的值、勾选框的状态等。
  • 全局状态（Global State）：表单的全局性属性，如提交后后端返回的结果、表单所有属性的错误信息等。

局部状态

我们假设有一个简单的登录表单，其中包含用户名和密码输入框，以及一个登录按钮。我们可以采用以下三个步骤进行状态管理：

  1. 创建本地状态
-- ----------------------
----- ----- - -
  --------- ---
  --------- --
-

------ ------- -
  -----
-
  1. 声明 mutation
-- ----------------------
----- --------- - -
  ---------------- ------- -------- -
    ------------------ - -------------
  -
-

------ ------- -
  ------
  ---------
-
  1. 在组件中使用
----------
  -----
    ------ ------------------ ------------------------------- ----------------------
    ------ ------------------ ------------------------------- ----------------------
    ------- ----------------------------
  ------
-----------

--------
------ - ------------ - ---- ------
------ ------- -
  ----- ------------
  -------- -
    -----------------
      ----------------- ------------------------
    ---
    ----------- ----- ------ -
      -----------------------
        ----
        -----
      --
    --
    ----- -- -
      -- ----
    -
  --
  --------- -
    -------- -- -
      ------ --------------------------------
    --
    -------- -- -
      ------ --------------------------------
    -
  -
-
---------

在组件中，我们通过 v-model 绑定输入框数据，并通过 mapMutations 创建了 updateInputValue 方法。它将触发 login/updateInputValue 的 mutation，从而更新状态。

全局状态

对于全局状态，我们需要根据具体情况选择相应的方案。

我们假设一个表单的提交需要数据校验，并需要异步通信来提交数据。我们可以采用以下三个步骤进行状态管理：

  1. 创建全局状态
-- ---------------------
----- ----- - -
  --------- ---
  ----------- -----
  ------------ ----
-

------ ------- -
  -----
-
  1. 声明 action
-- ---------------------
----- ------- - -
  --------------- -- ------ -- --------- -
    ------ --- ----------------- ------- -- -
      -- ------------------
      -------------------------- ------ -- -
        -- ---------- --- -- -
          ----------------- ----------
          ---------------------
        - ---- -
          ----- ----- - ----------- -- ------------ -- -------------
          ------------------ ------
          -------------
        -
      --
    --
  -
-

------ -------- ---------------- ---------- --------- -
  ------------- -- -
    ----------
      ----- ------------------------ - ---
      -------- ---
      ------- -----
      ----- --------
    --
  -- -----
-

------ ------- -
  ------
  -------
-
  1. 声明 mutation
-- ---------------------
----- --------- - -
  ------- ------- -------- -
    -------------- - -------
    ---------------- - ----
    ----------------- - ----
  --
  -------- ------- -------- -
    ---------------- - -------
    ----------------- - -----
  -
-

------ ------- -
  ------
  --------
  ---------
-

类似于局部状态，在组件中我们可以拆分为以下几个步骤使用：

  1. 引入 action，提交表单数据
----------
  -----
    ------ -------------------
    ------ -------------------
    ------- -------------------------------
  ------
-----------

--------
------ - ---------- - ---- ------
------ ------- -
  ----- ------------
  -------- -
    ---------------
      ---------------- ----------------------
    ---
    ---------- -- -
      ------------------------------- -------------- --------- ---------------
    -
  --
  --------- -
    -------- -- -
      ------ --------------------------------
    --
    -------- -- -
      ------ --------------------------------
    -
  -
-
---------
  1. 监听表单提交状态
----------
  -----
    ------ -------------------
    ------ -------------------
    ------- -------------------------------
    ---- ---------------------- ---------- --------
    ---- ----------------------------------------------------------
  ------
-----------

--------
------ - ----------- -------- - ---- ------
------ ------- -
  ----- ------------
  -------- -
    ---------------
      ---------------- ----------------------
    ---
    ---------- -- -
      ------------------------------- -------------- --------- ----------------------- -- -
        ------------------- ---------
      ------------ -- -
        ------------------- ------ -- --
      --
    -
  --
  --------- -
    -------------
      ----------- ------- -- ----------------------
      ------------ ------- -- ----------------------
    ---
    -------- -- -
      ------ --------------------------------
    --
    -------- -- -
      ------ --------------------------------
    -
  -
-
---------

在组件中，我们使用mapActions引入submitFormAsync方法，并在按钮提交时调用submitForm方法提交。此外，我们从状态中派到了formErrors和formSuccess数据，并使用v-show属性显示错误或成功信息。

总结

使用 Vuex 可以方便地管理表单数据的状态，避免了无序、混乱的状态传递，并在多个组件中共享表单的状态，增强了代码的可维护性和可拓展性。同时，我们还需要注意，全局状态相较于局部状态需要处理异步请求和提交等问题。

完整示例代码：Github。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647c3f33968c7c53b075d600

阅读全文

猜你喜欢

  • 前端进阶：使用 Node.js 和 Sequelize 进行数据库操作

    在现代 Web 应用程序开发中，数据库是必不可少的。在前端开发中，我们经常需要与数据库交互来存储和检索数据。Node.js 是一种优秀的工具，可以为前端开发人员提供强大的支持。

    1 年前
  • ES9 Generator 生成器方法详解

    Generator 是 ES6 中新增的一个重要特性，在 JavaScript 编程中使用起来非常灵活，可以让我们更加方便地实现异步编程。ES9 中新增了一些有用的方法，本文将对这些方法进行详解。

    1 年前
  • 使用 PM2 与 Docker 实现 Node.js 进程自动化部署

    在前端开发中，Node.js 已经成为一种重要的技术选型。而在进行 Node.js 应用开发的同时，如何实现进程自动化部署也成为了一个必须要面对的问题。本文将介绍如何使用 PM2 与 Docker 实...

    1 年前
  • RESTful API 如何实现数据加密？

    在现代应用程序开发中，RESTful API 是最常用的方式之一。它允许不同的应用程序之间进行通信，以便共享数据或提供服务。虽然 RESTful API 为我们提供了强大的数据传递功能，但同时也会引入...

    1 年前
  • React 中的 Suspense 组件使用方法

    React 中的 Suspense 组件使用方法 React 的 Suspense 组件是 React 16 中新增的一个组件，它主要是为了解决代码分割和异步加载组件时出现的“白屏”问题。

    1 年前
  • LESS 中通过 setOptions() 方法自定义编译器的输出行为

    LESS 是一种动态的 CSS 预处理器，可以使 CSS 在编写时更加简便、可复用。除了基本的变量与嵌套规则外，LESS 还提供了一种自定义编译器输出的方法：setOptions()。

    1 年前
  • 如何使用 Material Design 实现可折叠的 NavigationView

    如何使用 Material Design 实现可折叠的 NavigationView 在前端开发中，使用 Material Design 可以为 Web 应用程序提供专业、统一的外观和交互风格。

    1 年前
  • 使用 Express.js 中的 async/await 功能异步处理数据

    在开发 web 应用时，服务器需要经常处理大量的请求和数据。为了提高开发效率和用户体验，需要使用一些异步操作来处理这些请求和数据。在 Express.js 中，使用 async/await 可以方便地...

    1 年前
  • Redis 中的数据压缩技术及应用

    Redis 是一个开源的基于内存的键值存储系统，被广泛用于构建高性能的 Web 应用。Redis 的出色性能主要得益于它的读写速度快、支持多种数据结构等特点。但是，由于 Redis 的存储结构要求全部...

    1 年前
  • 为什么我改变 array [index] 时，视图并不更新？

    引言 在我们的日常前端开发工作中，经常需要使用到数组。有时候，我们需要改变数组中的某个元素，但是却发现视图并没有更新。这时候我们可能会感到困惑，不知道问题出在哪里。

    1 年前
  • Mocha 测试中如何测试依赖项

    测试是前端开发过程中必不可少的一环。在这样的背景下，Mocha 这个测试框架是非常受欢迎的。而如何测试依赖项，也是前端测试中一个重要且比较复杂的话题。在本文中，我们将深入探讨如何在 Mocha 测试中...

    1 年前
  • CSS Grid 如何实现流式布局

    CSS Grid 是一种利用网格系统实现布局的 CSS 模块，它可以帮助 web 开发者更好地掌控网页的布局。通过使用 CSS Grid，我们可以很容易地实现流式布局，让网页在不同设备上都能够自适应地...

    1 年前
  • 在 Sass 中实现 CSS Reset

    CSS Reset 是指一组用于重置默认样式的 CSS 规则，旨在消除浏览器之间的差异，从而能够更容易地构建具有一致外观和交互的网站。在实际的开发过程中，CSS Reset 已经越来越常见，并广泛应用...

    1 年前
  • 使用 Custom Elements 创建自定义 HTML 元素的最佳实践

    前言 随着 Web 技术的不断发展，前端开发领域也在不断壮大。在开发过程中，我们经常需要在网页中使用一些自定义的 HTML 元素。Custom Elements 提供了一种创建自定义元素的方法，并且可...

    1 年前
  • 在 Deno 中使用 Google Cloud APIs 时遇到问题？这里有解决方式

    在 Deno 中使用 Google Cloud APIs 时遇到问题？这里有解决方式 在现代的 Web 应用程序中，与第三方 API 交互已变得非常普遍。而在 Deno 等新兴的 JavaScript...

    1 年前
  • Babel 7 中新增插件 @babel/proposal-object-rest-spread

    Babel 是 JavaScript 编译器，可以将 ES6+ 的 JavaScript 代码转换成向后兼容的 JavaScript 代码，在开发者中得到了广泛的应用。

    1 年前
  • 如何使用 ESLint 检测出冗余代码

    如果你是一名前端开发者，你可能会经常遇到这样的问题：代码冗余导致程序性能下降、代码可读性降低、代码维护困难等等问题。而如何有效地检测出代码中的冗余部分呢？这时，我们可以使用 ESLint 工具来帮助我...

    1 年前
  • Cypress 结合 Lighthouse 实现前端性能优化

    前言 在现代 web 开发中，性能优化成为了一件非常重要的事情。因为用户体验成了产品的一个重要指标，而页面的性能又是一个重要的体验指标。因此，在前端开发中，我们要注重优化页面性能，提高页面加载速度和用...

    1 年前
  • 解决 ECMAScript 2020 (ES11) 中断行符造成的错误问题

    解决 ECMAScript 2020 (ES11) 中断行符造成的错误问题 在 ECMAScript 2020 (ES11) 中，我们可能会遇到使用断行符 () 造成的错误问题。

    1 年前
  • ES2021：如何在您的项目中使用 Arrow 函数

    在 JavaScript 的新版本 ES2021 中，引入了 Arrow 函数（箭头函数），这种函数的语法更加简洁，可以让代码更加易读并且减少代码量。在本文中，我们将深入了解 Arrow 函数的语法和...

    1 年前

相关推荐

    暂无文章