# monx

> Clean State Management for Moon

Latest version **0.1.1** (published 2017-07-29) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-07-29 |
| First published | 2017-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 45 |
| Author | Kabir Shah |
| Maintainers | kingkabir |
| Keywords | monx, state, management, state, moon |

## Links

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

## 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.1.1 (latest) — 2017-07-29
- 0.1.0 — 2017-07-29
- 0.0.2 — 2017-07-08
- 0.0.1 — 2017-07-07

## README

# Monx

Clean State Management for Moon

### Features

* :balloon: Lightweight - 598 bytes minified and gzipped
* :zap: Performant - analyzes dependencies and updates view accordingly
* :bulb: Simple - just dispatch actions to update the state

### Installation

With NPM:

```sh
$ npm install monx
```

CDN:

```html
<script src="https://unpkg.com/monx"></script>
```

### Usage

Initialize the plugin with:

```js
Moon.use(Monx);
```

Then, create your store:

```js
const store = new Monx({
  state: {
    count: 1
  },
  actions: {
    increment: function(state, payload) {
      state.count += payload;
    }
  }
});
```

Each store has a state, which is the source of truth for all components with it injected. A store can only change the state through an **action**. An action can be asynchronous or synchronous, and will result in components depending on the property to be updated.

To inject the store into a component (or the root instance), use the `store` option.

```js
new Moon({
  el: "#app",
  template: `<div id="app">
    <h1>{{store.state.count}}</h1>
    <button m-on:click="increment">Increment</button>
  </div>`,
  methods: {
    increment: function() {
      store.dispatch("increment", 1);
    }
  },
  store: store
});
```

The given example has a state for a count, which multiple components can be injected with and share. When the user clicks the button, the increment method will be called on the root component, resulting in an action being dispatched to the store.

The action is called with a payload, which is an optional second argument to the `dispatch` method. The `increment` action then increments the count. Finally, Monx will search for instances that depend on `count`, and update them.

### License

Licensed under the [MIT License](https://kingpixil.github.io/license) by [Kabir Shah](https://kabir.ml)

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