# vuex-ts-class

> Provides VUex Typescript writing method and built-in encapsulation network request method, which can be used together

Latest version **1.0.84** (published 2020-03-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install vuex-ts-class
pnpm add vuex-ts-class
yarn add vuex-ts-class
bun add vuex-ts-class
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.84 |
| Published | 2020-03-17 |
| First published | 2019-10-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 64.1 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | 2209697714@qq.com |
| Maintainers | tcweidao |
| Keywords | vuex, vuex-ts, vuex-ts-class, class, vuex-class |

## Links

- npm: https://www.npmjs.com/package/vuex-ts-class
- Repository: https://github.com/15523257452/vuex-ts-class
- Issues: https://github.com/15523257452/vuex-ts-class/issues
- npm.io page: https://npm.io/package/vuex-ts-class

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [vuex](https://npm.io/package/vuex.md) ^3.1.1

## Recent versions

- 1.0.84 (latest) — 2020-03-17
- 1.0.83 — 2020-03-17
- 1.0.82 — 2020-03-17
- 1.0.81 — 2020-03-02
- 1.0.785 — 2019-10-27
- 1.0.784 — 2019-10-27
- 1.0.783 — 2019-10-27
- 1.0.782 — 2019-10-27
- 1.0.781 — 2019-10-27
- 1.0.78 — 2019-10-27
- 1.0.77 — 2019-10-26
- 1.0.76 — 2019-10-26
- 1.0.751 — 2019-10-26
- 1.0.75 — 2019-10-26
- 1.0.74 — 2019-10-26
- … 10 more at https://npm.io/package/vuex-ts-class/versions

## README

### 推荐使用这个
 [vuex-annotation](https://github.com/weidao123/vuex-annotation)
 * 这个更加的简洁 使用更方便
 
 
 
 
 
 
 
 
 
 
### 简介：
* vuex-ts-class 是对Vuex的一层包装，使用TypeScript的语法来编写Vuex，使得开发大型应用能更好的提高代码的健壮性
* 内置封装了基于 XMLHttpRequest 的 request 方法，并且对外提供了一些全局参数以及生命周期的设置方法 RequestContext
                
 ### 使用:
* `yarn add vuex-ts-class`

```typescript
import {Service, RequestContext} from 'vuex-ts-class'
  const service = new Service({
      state: {},
      actions: {},
      mutations: {}
  });
  
  //全局设置全局请求头部
  RequestContext.setRequestHeaders({"Content-Type": "application/json;charset=UTF-8"});
  
  //注册一个模块
  service.registerModule(Order);
  service.registerModule(UserModule);
  
  //导出vuex的实例
  export default service.createStore();
 ```

#### 模块:
```typescript
import {MutationMethod, VuexModule, ActionMethod, Request, VuexModuleClass, request} from 'vuex-ts-class';

//使用VuexModule装饰器来生成一个vuex模块 (PS: 这里一定要指明模块名称，不然上生产环境会出问题)
@VuexModule({name: 'User'})
export class UserModule {

    public name: string = 'hhh';

    @MutationMethod
    public setName(state: any, params: number): void {
        state.name = 'mutations setName' + params;
    }

    @ActionMethod
    @Request({url: '/test/url', method: 'POST'})
    public async getName({commit}: any, params: number): Promise<any> {
        const names = await this.request({params});
        commit('setName', names);
    }

    @ActionMethod
    public async getAge({commit}: any): Promise<any> {
        const config: RequestParams = {};
        const names = await request(config);
    }


    //该方法只是为了不让ts提示没this.request报错
    private request(params: any) {}
}

//通过继承VuexModuleClass 来生成一个vuex模块
export class Order extends VuexModuleClass {
   constructor() {
        super();
        //必须调用父类的generate方法 并且传入this
        //(PS: 这里一定要指明模块名称，不然上生产环境会出问题)
        super.generate(this, "ModuleName");
    }
    //other...
}
```

---
_Source: https://npm.io/package/vuex-ts-class · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._