# @winwin/cascade-store

> A simple store work with Array State and Cascade State

Latest version **0.2.0** (published 2020-11-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @winwin/cascade-store
pnpm add @winwin/cascade-store
yarn add @winwin/cascade-store
bun add @winwin/cascade-store
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-11-12 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | winwin_2011 |
| Maintainers | winwin2011 |
| Keywords | store, state, vuex |

## Links

- npm: https://www.npmjs.com/package/@winwin/cascade-store
- Repository: https://github.com/YuJianghao/cascade-store
- Homepage: https://github.com/YuJianghao/cascade-store#readme
- Issues: https://github.com/YuJianghao/cascade-store/issues
- npm.io page: https://npm.io/package/@winwin/cascade-store

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.2.0 (latest) — 2020-11-12
- 0.1.0 — 2020-11-12

## README

# cascade-store

A simple store work with Array State and Cascade State

## Installation

```bash
yarn add @winwin/cascade-store
```

## Usage

### Work with common stores(i.e. object store)

Just implement your store according to `IObjStore` interface

### Work with array state

In this step, we implement `IArrayStore` interface.

#### State

`IArrayStore.state` is an array of common state object. The only different is that this is an array which has type: `IState[]`, while common state has type `IState`.

#### Mutations

Mutations should receive an parameter to indicate which state(in state array) you want you mutate. This parameter should be state obj reference or state index. The other params are the same as common mutations.

#### Getters

All getters should return a function taking state obj reference or state index as the only parameter to get the working state. When using getter, user should pass in state obj reference or state index and call the function themselves.

> Note. If you want to get summarized info about state array, DO NOT write getters here. I will explain later.

You can use `getState` helper function when implementing `IArrayStore.mutaions` and `IArrayStore.mutaions`. This function will help you get item from array by index or array item.

### Parse function

This function(`IArrayStore<T>.parse`) tell parent store or outside how to build a state. All state should be build by **this arraystore** or build by **others by calling parse function**.

### Work with cascade store

The whole store look like:

```txt
root-store
  ├─getters
  ├─mutations
  └─state
      ├─part-state-1
      ├─...
      ├─part-state-n
      ├─sub-store-1
      │   ├─getters
      │   ├─mutations
      │   └─state
      │       ├─part-state-11
      │       ├─...
      │       ├─part-state-1n
      │       ├─sub-store-11
      │       │   ├─getters
      │       │   ├─mutations
      │       │   └─state
      │       │       ├─part-state-111
      │       │       ├─...
      │       │       ├─part-state-11n
      │       │       ├─sub-store-111
      │       │       ├─...
      │       │       └─sub-store-11n
      │       ├─sub-store-12
      │       ├─...
      │       └─sub-store-1n
      ├─sub-store-2
      ├─...
      └─sub-store-n
```

Quite simple, yes? See `./example` folder for exapmle.

### Work with cascade array store

If add/remove/reorder array state(i.e. child store's state), please finish these mutation inside parent store's mutation. Cause it's not necessary to know how child store works.

If add a new child store state, use `IArrayStore<T>.parse` instead of build state yourself. Cause how to build state and manage state is part of the child store's job.

If get summarized info about array state, also use parent store's getter. Cause, child store getters are mean to get info that is relative to **ONE** child store state.

## Contribute

Just make PRs. I'm still stucking with how to manage state in web apps.

---
_Source: https://npm.io/package/@winwin/cascade-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._