Ngxs简单入门

最新推荐文章于 2024-06-23 09:43:02 发布
最新推荐文章于 2024-06-23 09:43:02 发布
阅读量1.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41313807/article/details/110475692
版权

目录

Ngxs简单入门

NGXS is a state management pattern + library for Angular

简单来说就是一个专门应用于angular的状态管理器

简介

ngxs有四个概念：

store

The store is a global state manager that dispatches actions your state containers listen to and provides a way to select data slices out from the global state.

简单说就是一个全局状态管理器，可以执行你的状态容器内的操作（actions)，同时可以为外部提供状态的获取方式，例如：执行CountState(状态容器)里的add(),component通过select来订阅状态，而**actions以及states的定义都在CountState（状态容器）**里。具体可通过下面的例子理解。

actions：

表示在store中注册的动作方法，这个方法用于自行更新组件关注的状态参数信息

select：

表示选定的状态参数，这里用于反馈给外部

state:

States are classes that define a state container.也就是说一个state是一个状态容器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LpknUYEm-1606880067576)(https://gblobscdn.gitbook.com/assets%2F-L9CoGJCq3UCfKJ7RCUg%2F-Lqo8CEiTGbFfHN-MPem%2F-Lqo8EeI9WI8AjKSCgMo%2Fdiagram.png?alt=media)]

安装

npm install @ngxs/store --save

# or if you are using yarn

yarn add @ngxs/store

然后在app.module.ts中引入NgxsModule，在创建好state文件后，需要引入state文件，这个文件包含了state以及action：

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';

import { CountState } from './app.state';

@NgModule({
  imports: [
    NgxsModule.forRoot([CountState ], {
      developmentMode: !environment.production
    })
  ]
})
export class AppModule {}

小例子

文件结构

在这里插入图片描述

本demo就三个文件，组件与页面进行交互，同时订阅状态，并改变状态；状态容器定义状态states以及actios的处理机制。

代码详解

根模块:app.module.ts

**重点：**引入NgxsModule 模块以及状态容器CountState（在后面定义）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxsModule } from '@ngxs/store';

import { AppComponent } from './app.component';
import { CountState } from './app.state';

@NgModule({
  imports: [
    BrowserModule,
    NgxsModule.forRoot([CountState])
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

根组件：app.component.ts

**重点：**引入Store, Select，以及状态容器CountState和Add操作，并订阅关注状态容器CountState里的状态

import { Component } from '@angular/core';
import { Store, Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CountState, Add, Reduce, Reset} from './app.state';

@Component({
  selector: 'my-app',
  template: `
    <h1>Count is {{count$ | async}}</h1>
	<button (click)="onClick1()">Add 1</button>
	<button (click)="onClick2()">Reduce 1</button>
	<button (click)="onClick3()">Reset</button>
  `
})
export class AppComponent  {

  @Select(CountState) count$: Observable<number>;

  constructor(private store: Store) {}

   onClick1() {
    this.store.dispatch(new Add());
  }
 
  onClick2() {
    this.store.dispatch(new Reduce());
  }
 
  onClick3() {
    this.store.dispatch(new Reset());
  }
  
}

状态容器：app.state.ts

重点：引入State, Action，定义action：Add，Reduce，Reset,定义状态

import { State, Action，StateContext } from '@ngxs/store';

export class Add {
    static readonly type = 'Add';
}
 
export class Reduce {
    static readonly type = 'Reduce';
}
 
export class Reset {
    static readonly type = 'Reset';
}
@State<number>({
  name: 'count',
  defaults: 0
})
export class CountState {
  @Action(Add)
  add({ getState, setState }) {
    const state = getState();
    setState(state + 1);
  }
  @Action(Reduce)
    reduce({ getState, setState }) {
        const state = getState();
        setState(state - 1);
    }
 
   @Action(Reset)
    reset(ctx: StateContext<number>) {
        ctx.setState(0);
    }
}

效果

Ngxs简单入门

NGXS is a state management pattern + library for Angular

简单来说就是一个专门应用于angular的状态管理器

简介

ngxs有四个概念：

store

The store is a global state manager that dispatches actions your state containers listen to and provides a way to select data slices out from the global state.

简单说就是一个全局状态管理器，可以执行你的状态容器内的操作（actions)，同时可以为外部提供状态的获取方式，例如：执行CountState(状态容器)里的add(),component通过select来订阅状态，而**actions以及states的定义都在CountState（状态容器）**里。具体可通过下面的例子理解。

actions：

表示在store中注册的动作方法，这个方法用于自行更新组件关注的状态参数信息

select：

表示选定的状态参数，这里用于反馈给外部

state:

States are classes that define a state container.也就是说一个state是一个状态容器

img

安装

npm install @ngxs/store --save

# or if you are using yarn

yarn add @ngxs/store

然后在app.module.ts中引入NgxsModule，在创建好state文件后，需要引入state文件，这个文件包含了state以及action：

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';

import { CountState } from './app.state';

@NgModule({
  imports: [
    NgxsModule.forRoot([CountState ], {
      developmentMode: !environment.production
    })
  ]
})
export class AppModule {}

小例子

文件结构

在这里插入图片描述

本demo就三个文件，组件与页面进行交互，同时订阅状态，并改变状态；状态容器定义状态states以及actios的处理机制。

代码详解

根模块:app.module.ts

**重点：**引入NgxsModule 模块以及状态容器CountState（在后面定义）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxsModule } from '@ngxs/store';

import { AppComponent } from './app.component';
import { CountState } from './app.state';

@NgModule({
  imports: [
    BrowserModule,
    NgxsModule.forRoot([CountState])
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

根组件：app.component.ts

**重点：**引入Store, Select，以及状态容器CountState和Add操作，并订阅关注状态容器CountState里的状态

import { Component } from '@angular/core';
import { Store, Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CountState, Add, Reduce, Reset} from './app.state';

@Component({
  selector: 'my-app',
  template: `
    <h1>Count is {{count$ | async}}</h1>
	<button (click)="onClick1()">Add 1</button>
	<button (click)="onClick2()">Reduce 1</button>
	<button (click)="onClick3()">Reset</button>
  `
})
export class AppComponent  {

  @Select(CountState) count$: Observable<number>;

  constructor(private store: Store) {}

   onClick1() {
    this.store.dispatch(new Add());
  }
 
  onClick2() {
    this.store.dispatch(new Reduce());
  }
 
  onClick3() {
    this.store.dispatch(new Reset());
  }
  
}

状态容器：app.state.ts

重点：引入State, Action，定义action：Add，Reduce，Reset,定义状态

import { State, Action，StateContext } from '@ngxs/store';

export class Add {
    static readonly type = 'Add';
}
 
export class Reduce {
    static readonly type = 'Reduce';
}
 
export class Reset {
    static readonly type = 'Reset';
}
@State<number>({
  name: 'count',
  defaults: 0
})
export class CountState {
  @Action(Add)
  add({ getState, setState }) {
    const state = getState();
    setState(state + 1);
  }
  @Action(Reduce)
    reduce({ getState, setState }) {
        const state = getState();
        setState(state - 1);
    }
 
   @Action(Reset)
    reset(ctx: StateContext<number>) {
        ctx.setState(0);
    }
}

效果

在这里插入图片描述

只有一二三
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NGXSTutorial:Angular NGXS教程（以Scratch为例）是当今的热门话题。 我们已经在此博客中介绍了Angular NgRx存储模式，现在是时候替代该名为Angular NGXS的库了。 Ngxs是角度状态管理的另一种方法
05-09
Ng6xs 该项目是使用版本6.0.7生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用ng help或查看 。
ngxs-executing
04-27
Ngxs执行 该项目是使用版本7.0.4生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component ...
ngxs入门
weixin_33852020的博客
09-25 2775
ngxs文档 https://ngxs.gitbook.io/ngxs ngxs是什么 ngxs是一款angular的状态管理框架。他能帮助我们全局性的管理应用程序的所有状态，状态的概念无所不包，我们的数据，登录认证，等等，都可以称为状态。 什么时候可能想要使用 当应用程序的各个组件需要共享某些数据时 当你需要组件变得更加独立，更易于...
探索Angular世界中的双雄：NGXS vs NgRx，一框架两管理库的深度剖析
最新发布
gitblog_00088的博客
06-23 359
探索Angular世界中的双雄：NGXS vs NgRx，一框架两管理库的深度剖析 项目地址:https://gitcode.com/codediodeio/ngrx-vs-ngxs 在前端开发的广袤天地中，Angular以其强大的类型安全和可维护性赢得了开发者的心。而当谈到状态管理——这一应用架构的核心时，One Framework - Two State Management Librarie...
ngxs中文
weixin_30344795的博客
10-08 798
ngxs 是Angular的状态管理库 转载于:https://www.cnblogs.com/fuchao2012/p/9756841.html
[Angular] Introduce to NGXS
weixin_30539835的博客
04-27 368
Went though tow youtube videos about NGXS https://angularfirebase.com/lessons/ngxs-quick-start-angular-state-management/ https://www.youtube.com/watch?v=SfiO3bDUK7Q The main thing which I am in...
Ngxs用法实例详解
旧时佑忆的空间
09-21 3000
ngxs是angular的一个状态管理框架，可以全局的管理应用程序的所有状态。 使用的场景： 当应用程序的各个组件需要共享某些数据时 当需要组件变得更加独立，更易于测试 当程序的状态改变来自各个页面的组件时 当多人共同协作一个大型项目时 ngxs有四个概念： ...
java种菜源码-ngxs-dropdown-tree:ngxs-下拉树
06-05
java种菜源码最初分叉自： 我更新了软件包以支持 ...安装上述依赖项后，通过以下方式安装ngxs-dropdown-tree ： npm install ngxs-dropdown-tree --save 安装后，您需要在应用程序模块中导入我们的主模块： import
ngxs-starter：Angular 7 + NGXS Store 3.5.1 Starter项目
02-19
Ngxs简介 该项目是使用版本7.0.2生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component ...
ngxs-optimistic-update
04-10
NgxsOptimisticUpdates 该项目是使用版本11.2.8生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一...
ngxs-firebase-angular6-sample:一个项目中所有最热门的Angular技术
04-30
一个项目中所有最热门的Angular技术：Angular 6，Material，Firebase Firestore，Angularfire2，NGXS。 如果您对进一步的开发感兴趣，请为该项目加注星标并打开新一期。 公开您的建议。 该项目是使用版本6.0.8生成...
Ngxs-Pizza-Order
04-25
NGXS：角度状态管理 用于Angular的Ngxs（使用Angular的原始：NGRX应用程序，NGRX存储，效果，路由器存储）。 角度6 rxjs 6 ngxs 3 此仓库充当Ultimate Angular NGRX Store + Effects课程的种子项目，以及阶梯式分支机构中的最终解决方案，与我们一起 ！ | | 设置和安装 从GitHub内部分叉此存储库，以便您可以直接提交到您的帐户，或仅下载内部包含内容的.zip捆绑包。 依赖安装 在构建该项目的过程中，您将需要在Node.js上运行的开发依赖项，请按照以下步骤进行所有设置（如果已经有了其中的一些内容，请在适当的地方跳到下一步）： 为Windows或Mac下载并安装 这就是运行项目所需的工具，让我们进入项目安装。 项目安装和服务器 现在，您已经拉下了存储库并进行了所有设置，您需要使用终端将cd插入克隆存储库的
ngx-store：Angular装饰器可以自动将变量保留在HTML5 LocalStorage，SessionStorage，Cookie中； 可注入服务，用于管理和侦听数据更改等
02-01
角度存储 Cookie，会话和本地存储的装饰器和服务 该库添加了装饰器，使使用HTML5的localStorage和sessionStorage自动保存和恢复变量变得非常容易。 它还提供了Angular-Injectable Session-和LocalStorageService。 包括什么？ 装饰器功能非常易于使用和配置（请参阅 ）： @LocalStorage() -将变量保存在HTML5 localStorage中 @SessionStorage() -在HTML5 sessionStorage中保存变量 @CookieStorage() -将变量保存为cookie @SharedStorage() -将变量保留在可以在类之间共享的临时存储器中 @TempStorage() - SharedStorage别名 可注入的LocalStorageService ， SessionStorageService ， CookiesStorageService和SharedStorageService （） 可能性 简单的配置（见节） 兼容性： 所有以前的版本 Angular
Angular-ngx-store.zip
09-18
Angular-ngx-store.zip,Angular decorators可自动将变量保存在HTML5本地存储、会话存储、cookies中；可注入的服务可用于管理和侦听数据更改等。Angular存储,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作流。
ng-state-mgmt-examples：示例项目，使用不同的库展示Angular中的状态管理：Ngrx，Akita，Ngxs和纯rxjs用于简单的todo应用程序
02-15
在Angular中使用不同状态mgmt库的示例 Ngrx 秋田 Ngxs 纯Rxjs
ngxs 状态管理器
weixin_33965305的博客
05-05 758
简单的安装@ngxs/schematics > ng add @ngxs/schematics > ng g ngxs-sk --spec // 会生成一个 src/store 文件 1. 配置 src/store 下的config文件 (完成todo)。 2. 在Core模块中导入NgxsStoreModule模块，没有创建Core就直接在AppModule中导入。 官网文档 ...
在Angular中使用NGXS状态管理
Tonghanhan的博客
04-07 771
在做公司项目的时候，有看到ngxs的操作，但查阅了不少资料都没有一个统一的在angular项目实际运用中使用ngxs。所以研究了一下ngxs文档写下了这篇文章。一、NGXS状态管理的概念NGXS主要包含四个概念：1. Action（操作） ：一个对要执行的操作以及关联元数据进行描述的类2. Store（存储） ：全局状态容器，action的执行器以及查询器3. State（状态） ：对状态进行定义的类4. Select（查询）：对状态进行分片查询。
ngxs store 基础知识脑图
qq_39948043的博客
05-15 194
ngxs store 基础知识脑图
精通Angular：构建强大动态Web应用（第5版）
此外，书中还可能涉及Angular的模块化（Modules）、状态管理（如NgRx或Ngxs）、测试（Testing）、性能优化（Performance Optimization）以及与后端框架（如Node.js和Spring）的集成等内容。对于Angular的最新特性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值