Vue 3 状态管理实战：构建用户登录注册功能 - 掌握 Vuex 集中管理应用状态

引言

欢迎再次回到 Vue 3 + 现代前端工程化 系列技术博客！ 在昨天的第四篇博客中，我们深入学习了 Vue 3 路由管理，并为博客添加了多页面导航功能，掌握了 Vue Router 构建 SPA 应用的关键技术。 今天，我们将继续深入 Vue 3 工程化实践的核心领域，聚焦于状态管理。

随着应用规模的不断扩大和功能的日益复杂，组件之间的数据共享和状态管理变得愈发重要。 在大型 Vue 3 应用中，如果仍然依赖 props 和 emits 进行组件通信，状态将分散在各个组件中，难以维护和追踪，容易导致 “prop drilling” (props 逐层传递) 和 “event chains” (事件链式触发) 等问题，使得代码变得臃肿且难以维护。 Vuex 作为 Vue 官方提供的状态管理库，正是为了解决这些问题而生。 它提供了一个集中式的状态管理方案，将应用的所有组件的共享状态抽取出来，统一管理，使得状态变化可预测、易于维护，并提升了大型应用的开发效率和可维护性。 在本篇博客中，我们将通过构建一个简单的用户登录/注册功能，深入学习 Vuex 的状态管理模式，掌握 Store, State, Mutations, Actions, Getters 等核心概念，构建更健壮、更易于维护的 Vue 3 应用。

通过这个项目，您将学习到：

• Vuex 核心概念: 深入理解 Vuex 的 Store, State, Mutations, Actions, Getters 等核心概念及其作用。
• Vuex 安装与配置: 掌握 Vuex 的安装步骤，并学会配置 Vuex Store 实例，集成到 Vue 3 应用中。
• State 状态管理: 学习使用 Vuex 的 State 集中管理应用状态，实现组件间的数据共享。
• Mutations 同步修改状态: 掌握 Mutations 的基本用法，理解 Mutations 在同步修改状态中的作用和约束。
• Actions 异步操作: 学习 Actions 的基本用法，理解 Actions 在处理异步操作和提交 Mutations 中的作用。
• Getters 数据派生: 掌握 Getters 的基本用法，学会从 State 中派生计算新的状态数据。
• 模块化状态管理: (本篇博客暂不涉及模块化，将在后续博客中讲解 Vuex 模块化)。
• 构建可维护的应用: 体验使用 Vuex 管理应用状态，提升代码组织性和可维护性，为构建大型 Vue 3 应用打下基础。
• 工程化思维: 将状态管理融入到 Vue 3 项目中，进一步提升您的前端工程化实践水平。

项目简介： 用户登录/注册功能

我们将为一个简单的应用添加用户登录/注册功能，使其具备以下核心功能：

• 登录页面: 用户可以输入用户名和密码进行登录。
• 注册页面: 用户可以输入用户名和密码进行注册。
• 用户认证状态管理: 应用需要管理用户的登录状态 (已登录/未登录)。
• 用户信息展示: 登录成功后，在特定区域展示当前登录用户的用户名。
• 模拟后端 API: 本篇博客将使用模拟的 JavaScript 对象和 setTimeout 函数来模拟后端 API 请求 (实际项目中应与后端 API 交互)。

通过构建用户登录/注册功能，我们将深入实践：

• Vuex Store 配置: 创建 Vuex Store 实例，配置 State, Mutations, Actions, Getters。
• State 状态存储: 使用 State 存储用户认证状态 (例如，isLoggedIn, username)。
• Mutations 状态修改: 使用 Mutations 同步修改用户认证状态 (例如，登录成功、登录失败、注册成功)。
• Actions 异步操作: 使用 Actions 模拟异步登录和注册 API 请求，并在 Actions 中提交 Mutations 修改状态。
• 组件状态访问: 在 Vue 组件中使用 mapState, mapMutations, mapActions, mapGetters 辅助函数或 useStore Hook 访问和修改 Vuex Store 中的状态。

Vuex 核心概念回顾

在开始项目实战之前，让我们回顾 Vuex 的核心概念，为后续的实践打下坚实的基础。

• Store: Store 是 Vuex 的核心概念，是应用程序的中央数据存储容器。 Store 包含了应用的所有状态 (State)、状态修改方法 (Mutations)、异步操作方法 (Actions) 和状态派生数据 (Getters)。 在 Vuex 中，我们使用单一的 Store 来管理整个应用的状态。
• State: State 是 Vuex 中存储应用状态的对象。 State 类似于组件中的 data，但它是全局的、集中的。 任何组件都可以访问 Store 中的 State 数据。 State 是 Vuex 状态管理的核心数据源。
• Mutations: Mutations 是 Vuex 中同步修改 State 的方法。 Mutations 类似于事件，每个 mutation 都有一个名称 (type) 和一个回调函数 (handler)。 回调函数的第一个参数是当前的 State，第二个参数是提交 mutation 时传递的 payload (负载)。 Mutations 必须是同步函数，这是 Vuex 为了实现状态追踪和时间旅行 (time travel debugging) 而做出的约束。
• Actions: Actions 是 Vuex 中处理异步操作的方法。 Actions 可以包含任意异步操作逻辑，例如 API 请求、定时器等。 Actions 不能直接修改 State，而是提交 Mutations 来修改 State。 Actions 的回调函数的第一个参数是一个 context 对象，context 对象提供了与 Store 实例相同的方法和属性 (例如 context.commit, context.dispatch, context.state, context.getters)。
• Getters: Getters 类似于组件中的 computed 计算属性，用于从 State 中派生计算新的状态数据。 Getters 的返回值会基于其依赖的 State 进行缓存，只有当依赖的 State 发生变化时，Getters 才会重新计算。 Getters 可以用于对 State 数据进行过滤、格式化、组合等操作，方便组件使用。

为什么需要 Vuex 进行状态管理？

Vuex 作为 Vue 官方的状态管理库，为我们带来了以下优势：

• 集中式状态管理: Vuex 将应用的所有共享状态集中管理在一个 Store 中，避免了状态分散在各个组件中难以维护的问题，使得状态管理更加清晰和可控。
• 组件间数据共享: Vuex 提供了一种统一的方式在不同组件之间共享状态数据，无需手动逐层传递 props 或使用复杂的事件通信机制，简化了组件通信，提高了开发效率。
• 状态变更可追踪: Vuex 强制使用 Mutations 同步修改 State，并记录每一次状态变更，使得状态变化可追踪、可预测，方便调试和维护。 Vuex 的时间旅行调试功能也是基于状态变更的可追踪性实现的。
• 大型应用架构: Vuex 为构建大型 Vue 应用提供了清晰的应用架构模式。 通过合理划分 State, Mutations, Actions, Getters，可以更好地组织和管理应用状态，提高代码的可维护性和可扩展性。
• 开发效率提升: Vuex 简化了状态管理和组件通信，使得开发者可以更专注于业务逻辑的实现，提高开发效率。 Vuex 提供的各种辅助函数 (例如 mapState, mapMutations, mapActions, mapGetters) 也进一步简化了组件中使用 Vuex 的代码。
• 官方支持和社区生态: Vuex 是 Vue 官方维护的状态管理库，拥有完善的文档和活跃的社区支持。 Vuex 生态系统也提供了丰富的插件和工具，例如 Vuex Persist (状态持久化插件)、Vuex ORM (Vuex 对象关系映射) 等，可以满足各种复杂的应用场景需求.

实战步骤： 构建用户登录/注册功能

接下来，我们将一步步使用 Vuex 构建我们的用户登录/注册功能，深入理解 Vuex 的状态管理模式。

步骤 1： 项目初始化 (沿用 Day 4 项目)

我们将沿用 Day 4 创建的 vue3-counter-app 项目。 如果您还没有创建项目，请参考 Day 1 博客中的步骤进行初始化。 无需创建新的项目，我们将在已有的项目基础上进行开发。

步骤 2： 安装 Vuex

首先，我们需要安装 Vuex。 打开终端，进入项目目录 vue3-counter-app，并执行以下命令：

npm install vuex@4

• npm install vuex@4: 这条命令使用 npm 安装 Vuex 4 版本。 Vuex 4 是与 Vue 3 兼容的最新版本。

步骤 3： 创建 Vuex Store (store/index.js)

接下来，我们需要创建一个 store/index.js 文件，用于配置 Vuex Store 实例，并定义 State, Mutations, Actions, Getters。 在 src 目录下创建 store 文件夹，并在 store 文件夹下创建 index.js 文件。

src/store/index.js 文件内容如下：

import {
    createStore } from 'vuex'

const store = createStore({
   
  state () {
    // 定义 State
    return {
   
      isLoggedIn: false, // 用户登录状态，默认未登录
      username: null // 用户名，默认 null
    }
  },
  mutations: {
    // 定义 Mutations
    loginSuccess (state, username) {
    // 登录成功 mutation
      state.isLoggedIn = true
      state.username = username
    },
    loginFailure (state) {
    // 登录失败 mutation
      state.isLoggedIn = false
      state.username = null
    },
    logout (