这次给大家带来JS里计数器的使用，使用JS里计数器的注意事项有哪些，下面就是实战案例，一起来看一下。
angular2+ 的学习成本应该是三大框架中最高的一个，教程及案例稀缺，流程较为复杂，这里我用计数器和在线获取用户数据并渲染成列表这两个案例来帮大家快速入手angular2+。
在开始之前，希望你能先掌握rxjs以及typescript，否则对其中的一些写法可能会觉得难以理解。
在开始之前，需要先安装@ngrx/store和@ngrx/effects
yarn add @ngrx/store @ngrx/effects
本教程使用的 ngrx/effects和ngrx/store版本均为5.2.0。
先来大致说一下开发流程：
开始 -> 编写数据模型 -> 编写action -> 编写redurces并配置到相应module -> 编写services -> 编写effects并配置到相应module -> 创建组件 -> 组件绑定数据模型 -> 渲染
我们先完成计数器案例。此案例由于没有异步任务，所以可以省略掉services和effects。
从创建项目到启动初始页面之间的步骤这里就不讲了。注意style要使用scss。还有不要使用cnpm安装包。改用yarn或者npm，这样后期使用不容易报错。
ng new your-project --style scss
登录后复制
第一步：编写数据模型（app/models/num.ts）
export class Num { count: number; constructor(num: number) { this.count = num; }}
登录后复制
第二步：编写action（app/actions/num.ts）
import {Action} from '@ngrx/store'; export enum NumActionType { Add = 'ADD'} export class ADD implements Action { readonly type = NumActionType.Add; //固定写法，必须叫type}
登录后复制
第三步：编写redurcers（app/redurces/modelNum.ts）
import {Num} from '../models/num';import {Action} from '@ngrx/store';import {NumActionType} from '../actions/num'; export const modelNum = (state: Num = new Num(0), action: Action) => { switch (action.type) { case NumActionType.Add: state.count++; return state; default: return state; }};
登录后复制
不要忘记配置redurcer（app/app.module.ts）
imports: [ BrowserModule, RouterModule.forRoot(routes), StoreModule.forRoot({ modelNum}), //配置redurcer ],
登录后复制
第四部：创建组件
ng g component model-num
第五步：组件绑定数据模型（连带完成第六步）
组件html文件：
{{num.count}}
to list demo
登录后复制
组件ts文件：
import {Component, OnInit} from '@angular/core';import {Num} from '../models/num';import {Store} from '@ngrx/store';import {NumActionType} from '../actions/num';
登录后复制
@Component({ selector: 'app-model-demo', templateUrl: './model-demo.component.html', styleUrls: ['./model-demo.component.scss']})export class ModelDemoComponent implements OnInit { constructor(private _store: Store) { this._store.select('modelNum').subscribe(mNum => { //涉及到rxjs。 this.num = mNum; console.log(mNum); }); } public num: Num; public add() { console.log('add'); this._store.dispatch({ //调用dispatch触发添加redurces type: NumActionType.Add }); } ngOnInit() { }}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JavaScript之优化DOM
Vue的计算属性
以上就是JS里计数器的使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780708.html
