NGXS状态管理库安装指南：从入门到精通

NGXS状态管理库安装指南：从入门到精通

store 🚀 NGXS - State Management for Angular 项目地址: https://gitcode.com/gh_mirrors/sto/store

什么是NGXS

NGXS是一个为Angular应用设计的状态管理库，它采用类似Redux的单一数据源模式，同时结合了RxJS的响应式编程特性，为Angular开发者提供了强大的状态管理解决方案。在开始使用NGXS之前，我们需要先了解如何正确安装和配置它。

安装方式概述

NGXS提供了两种主要安装方式：

1. 通过Schematics自动安装（推荐）：使用Angular CLI的ng add命令，可以一键完成安装和基础配置
2. 手动安装：通过包管理器直接安装，然后手动配置

使用Schematics自动安装（推荐）

这是最简单快捷的安装方式，特别适合新手用户。Schematics会自动处理依赖安装和基础配置。

基本安装命令

ng add @ngxs/store

执行此命令后，系统会交互式地询问：

• 需要安装哪些插件
• 要应用到哪个Angular项目

高级选项安装

如果你希望一次性完成所有配置，可以直接指定选项：

ng add @ngxs/store --plugins DEVTOOLS,FORM --project your-project-name

可用选项说明

| 选项 | 描述 | 默认值 | |-----------|-----------------------------|-------------------| | --project | 在angular.json中定义的项目名称 | 工作区的默认项目 | | --plugins | 要安装的插件列表，用逗号分隔 | 无（不安装任何插件） |

可选的插件列表

NGXS提供了丰富的插件生态系统，安装时可以选择：

• 开发者工具插件（DEVTOOLS）
• 表单插件（FORM）
• 热模块替换插件（HMR）
• 日志插件（LOGGER）
• 路由插件（ROUTER）
• 存储插件（STORAGE）
• WebSocket插件（WEBSOCKET）

Schematics自动完成的工作

使用ng add命令后，系统会自动：

1. 在package.json中添加@ngxs/store依赖
2. 添加你选择的插件依赖
3. 执行npm install安装所有依赖
4. 根据项目类型自动配置：
   • 对于独立API项目：在providers数组中添加provideStore([])
   • 对于模块化项目：在app.module.ts的imports数组中添加NgxsModule.forRoot([])

手动安装方式

如果你更喜欢手动控制安装过程，或者项目有特殊需求，可以采用手动安装方式。

安装核心库

# 使用npm
npm install @ngxs/store

# 使用yarn
yarn add @ngxs/store

# 使用pnpm
pnpm install @ngxs/store

配置应用

安装完成后，需要在应用的根模块中进行配置：

对于使用独立API的Angular应用：

import { provideStore } from '@ngxs/store';

export const appConfig: ApplicationConfig = {
  providers: [provideStore()]
};

对于模块化应用：

import { NgxsModule } from '@ngxs/store';

@NgModule({
  imports: [NgxsModule.forRoot([])]
})
export class AppModule {}

开发模式配置

NGXS提供了开发模式选项，可以在初始化时开启：

provideStore([], {
  developmentMode: true
})

开发模式下会：

1. 启用额外的运行时检查
2. 使用deep-freeze-strict模块冻结store状态
3. 提供更详细的错误信息和警告

安装开发版本

如果你想尝试NGXS的最新开发版本，可以使用@dev标签安装：

# 使用npm
npm install @ngxs/store@dev

# 使用yarn
yarn add @ngxs/store@dev

# 使用pnpm
pnpm install @ngxs/store@dev

开发版本包含了最新的功能和修复，但稳定性可能不如正式版本。安装后，package.json会锁定到具体的开发版本号。

最佳实践建议

1. 项目初始化阶段：推荐使用ng add命令安装，它能自动完成大部分配置工作
2. 已有项目集成：如果项目已经开发了一段时间，建议先手动安装并逐步集成状态管理
3. 插件选择：根据项目需求选择插件，不必一次性安装所有插件
4. 开发模式：开发环境下开启developmentMode，生产环境记得关闭
5. 版本控制：生产环境建议使用正式版本，而非@dev版本

常见问题解答

Q：安装后为什么需要重启开发服务器？ A：因为安装过程修改了angular.json和package.json等配置文件，需要重启才能使变更生效。

Q：可以同时安装正式版和开发版吗？ A：不推荐，这可能导致版本冲突。应该统一使用相同版本的NGXS核心和插件。

Q：安装插件后还需要额外配置吗？ A：大部分插件通过Schematics安装时会自动配置，但某些插件可能需要额外的手动配置，请参考具体插件文档。

通过本文的介绍，你应该已经掌握了NGXS的安装方法。无论是选择自动安装还是手动安装，都能为你的Angular应用添加强大的状态管理能力。安装完成后，下一步就是学习如何创建和使用状态了。

store 🚀 NGXS - State Management for Angular 项目地址: https://gitcode.com/gh_mirrors/sto/store