@wangdevops/ngxs-schematics v0.0.6

这个项目是ngxs的工具

使用方法

安装依赖

ng add @wangdevops/ngxs-schematics

这一步用来安装schematics依赖，安装到dev就可以，因为只是生成代码用的，打包时候不需要打进去

到对应目录生成文件

cd $project/src/app/store # 这里是生成文件的位置
ng g @wangdevops/ngxs-schematics:g aaa # aaa是生成的store名称

这一步也可以在WebStorm的功能执行，操作如下：

找到对应的schematics

回车后输入aaa再回车就可以生成了

执行结果

生成文件的目录结构

执行结束后会在 $project/src/app/store 目录下生成如下文件：

📒 $project/src/app/store //生成文件的位置
    📁 aaa //store存储目录
        📄 index.ts
        📄 aaa.action.ts
        📄 aaa.selector.ts
        📄 aaa.state.ts

具体文件内容

index.ts

export * from './aaa.action';
export * from './aaa.state';
export * from './aaa.selector';

aaa.action.ts

export namespace AaaAction {
  export class ChangeId {
    static readonly type = `修改id`;

    constructor(public id: number) {
    }
  }
}

aaa.selector.ts

import { Selector } from '@ngxs/store';
import { AaaState, AaaStateModel } from '.';

export class AaaSelector {
  @Selector([AaaState])
  static id({id}: AaaStateModel) {
    return id;
  }
}

aaa.state.ts

import { Injectable } from '@angular/core';
import { Action, State, StateContext } from '@ngxs/store';
import { AaaAction } from '.';

export interface AaaStateModel {
  id: number;
}

@State<AaaStateModel>({
  name: 'aaa',
  defaults: {
    id: 1,
  },
})
@Injectable({
  providedIn: 'root',
})
export class AaaState {
  @Action(AaaAction.ChangeId)
  changeId(ctx: StateContext<AaaStateModel>, data: AaaAction.ChangeId) {
    ctx.patchState({
      id: data.id,
    });
  }
}

源码地址

https://gitee.com/consolelog/ngxs-schematics.git