# widok

> Vue3 simple store

Latest version **0.5.3** (published 2021-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install widok
pnpm add widok
yarn add widok
bun add widok
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2021-02-02 |
| First published | 2020-02-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wszerad91@gmail.com |
| Maintainers | wszerad |
| Keywords | vue, vue3, vuex, vue-devtools, reactive, redux, state, typings |

## Links

- npm: https://www.npmjs.com/package/widok
- Repository: https://github.com/wszerad/widok
- Homepage: https://github.com/wszerad/widok#readme
- Issues: https://github.com/wszerad/widok/issues
- npm.io page: https://npm.io/package/widok

## Dependencies (1)

- [@vue/devtools-api](https://npm.io/package/@vue/devtools-api.md) ^6.0.0-beta.6

## 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.5.3 (latest) — 2021-02-02
- 0.5.2 — 2021-01-30
- 0.5.1 — 2021-01-24
- 0.5.0 — 2021-01-24
- 0.4.1 — 2020-10-10
- 0.4.0 — 2020-07-18
- 0.2.8 — 2020-03-31
- 0.2.7 — 2020-03-14
- 0.2.6 — 2020-03-14
- 0.2.5 — 2020-03-14
- 0.2.4 — 2020-02-02
- 0.2.3 — 2020-02-02
- 0.2.2 — 2020-02-02
- 0.2.1 — 2020-02-02
- 0.2.0 — 2020-02-02
- … 1 more at https://npm.io/package/widok/versions

## README

# Widok
```
> Uses @vue/reactivity part of vue lib
> Supports vue-devtools
> Minimal overhead
> Allow directly state manipulation (without using mutation)
```

## Usage

```typescript
// Widok instance
import { createWidok } from 'widok';
export const widok = createWidok();

// main app
const app = createApp(App);
app.use(widok);

// store
class Shop {
	cart = [];

	get getCount() {
		return this.cart.length;
	};

	addToCart(addItem: Item) {
		this.cart.push(addItem);
	}

	@Action()
	async buy() {
		await fetch('cart/buy', this.cart);
		this.cart.length = 0;
	}
}

export const shop = widok(Shop);

// usage
import { shop } from './shop';

shop.addToCart({
    name: 'Laptop',
    price: 200
});
// will emit Patch event

shop.cart.length = 0;
// will also emit Patch event

```

## API

### createWidok
Creates Widok instance and return function(StoreClass, name?)

`name` argument is optional, to overwrite default name extracted from function.name (class name)

### @Patch(name?)
Decorator, needed only to overwrite default name (extracted from function.name)

### @Action(name?)
Decorator, if the method performs any async operation should be decorated with (it is only for proper devtools logging).

`name` argument is optional, to overwrite default name extracted from function.name

## Events

* ActionEvent = some async activities (trigger PatchEvens or SetEvents)
* PatchEvent = grouped values change
* SetEvent = directly value change

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