# vue-fort

> The state management for Vue.

Latest version **1.5.0** (published 2021-01-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-fort
pnpm add vue-fort
yarn add vue-fort
bun add vue-fort
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2021-01-19 |
| First published | 2020-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sergej Sintschilin |
| Maintainers | seregpie |
| Keywords | data, model, state, store, vue |

## Links

- npm: https://www.npmjs.com/package/vue-fort
- Repository: https://github.com/SeregPie/VueFort
- Homepage: https://github.com/SeregPie/VueFort#readme
- Issues: https://github.com/SeregPie/VueFort/issues
- npm.io page: https://npm.io/package/vue-fort

## Dependencies (1)

- [vue-demi](https://npm.io/package/vue-demi.md) ^0.6.0

## 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

- 1.5.0 (latest) — 2021-01-19
- 1.6.0-alpha.0 (alpha) — 2021-02-23
- 1.4.0 — 2021-01-04
- 1.3.3 — 2020-12-22
- 1.3.2 — 2020-12-03
- 1.3.1 — 2020-12-03
- 1.3.0 — 2020-12-03
- 1.2.1 — 2020-12-03
- 1.2.0 — 2020-12-03
- 1.1.0 — 2020-12-02
- 1.0.0 — 2020-12-02
- 1.0.0-alpha.7 — 2020-11-24
- 1.0.0-alpha.6 — 2020-11-01
- 1.0.0-alpha.5 — 2020-10-29
- 1.0.0-alpha.4 — 2020-10-27
- … 4 more at https://npm.io/package/vue-fort/versions

## README

# VueFort

The state management for Vue.

Works for Vue 2 & 3.

## dependencies

- [VueDemi](https://github.com/antfu/vue-demi)

## setup

### npm

```shell
npm i vue-fort

npm i @vue/composition-api # if using Vue 2
```

---

```javascript
import {
  createInstance,
  toRefs,
} from 'vue-fort';
```

### browser

```html
<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/vue-fort"></script>
```

The module is globally available as `VueFort`.

## guide

### basics

Create a state.

```javascript
let state = reactive({count: 1});
```

Create an instance from the state.

```javascript
let instance = createInstance({
  state,
  getters: {
    countDouble() {
      return this.count * 2;
    },
  },
  watch: {
    countDouble(value) {
      console.log(value);
    },
  },
  methods: {
    inc() {
      this.count++;
    },
  },
});
```

Access the properties and methods of the instance directly.

```javascript
console.log(instance.count); // => 1
console.log(instance.countDouble); // => 2

instance.inc();

console.log(instance.count); // => 2
console.log(instance.countDouble); // => 4
```

The changes to the underlying state are reflected back to the instance and vice versa.

```javascript
state.count = 8;

console.log(instance.count); // => 8

instance.inc();

console.log(state.count); // => 9
```

### effect scope

When an instance is created during a component's `setup` function or lifecycle hooks, the instance is bound to the component's lifecycle and will be automatically destroyed when the component is unmounted.

In other cases, the instance can be explicitly destroyed by calling the `$destroy` function.

```javascript
instance.$destroy();

console.log(instance.$isDestroyed); // true
```

### nested instances

An instance can be explicitly bound to the scope of another instance via the `bind` option.

```javascript
let root = createInstance({
  state: {
    items: [],
  },
  methods: {
    addItem(label, value) {
      let {items} = this;
      let item = createInstance({
        state: {
          label,
          value,
        },
        bind: this,
      });
      items.push(item);
    },
    delItem(index) {
      let {items} = this;
      let [item] = items.splice(index, 1);
      item.$destroy();
    },
  },
});

root.addItem('a', 23);
root.addItem('b', 25);
root.addItem('c', 27);

console.log(root.items.length); // => 3

root.delItem(1);

console.log(root.items.length); // => 2
```

Destroying a parent instance will automatically destroy all its child instances.

```javascript
root.$destroy();

console.log(root.$isDestroyed); // true
console.log(root.items.every(item => item.$isDestroyed)); // true
```

## API

### toRefs

`toRefs(object)`

Creates an object where each property is a memoized reference pointing to the corresponding property of the original object.

```javascript
let data = reactive({a: 1});
console.log(toRefs(data).a === toRefs(data).a); // => true
```

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