# ngxs-schematics

**Repository Path**: consolelog/ngxs-schematics

## Basic Information

- **Project Name**: ngxs-schematics
- **Description**: 为ngxs开发的schematics，用于快速生成模板文件，减少需要编写的代码，加快开发速度
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-12
- **Last Updated**: 2022-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这个项目是ngxs的工具

## 使用方法

### 安装依赖

```bash
ng add @wangdevops/ngxs-schematics
```

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

### 到对应目录生成文件

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

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

![alt text](1.png "WebStorm操作1")

找到对应的schematics

![alt text](2.png "WebStorm操作1")

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


## 执行结果

### 生成文件的目录结构

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

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

### 具体文件内容

`index.ts`
```typescript
export * from './aaa.action';
export * from './aaa.state';
export * from './aaa.selector';
```

`aaa.action.ts`
```typescript
export namespace AaaAction {
  export class ChangeId {
    static readonly type = `修改id`;

    constructor(public id: number) {
    }
  }
}
```

`aaa.selector.ts`
```typescript
import { Selector } from '@ngxs/store';
import { AaaState, AaaStateModel } from '.';

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

`aaa.state.ts`
```typescript
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