# vuex-pathify

> Ridiculously simple Vuex setup + wiring

Latest version **3.0.0-beta** (published 2022-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-pathify
pnpm add vuex-pathify
yarn add vuex-pathify
bun add vuex-pathify
```

## Health

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

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-beta |
| Published | 2022-03-18 |
| First published | 2018-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 100.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1358 |
| Author | Dave Stewart |
| Maintainers | davestewart |
| Keywords | vuex, store |

## Links

- npm: https://www.npmjs.com/package/vuex-pathify
- Repository: https://github.com/davestewart/vuex-pathify
- Homepage: https://github.com/davestewart/vuex-pathify#readme
- Issues: https://github.com/davestewart/vuex-pathify/issues
- npm.io page: https://npm.io/package/vuex-pathify

## Dependencies (1)

- [vue-class-component](https://npm.io/package/vue-class-component.md) ^8.0.0-rc.1

## Recent versions

- 3.0.0-beta (latest) — 2022-03-18
- 1.5.1 — 2021-08-10
- 1.5.0 — 2021-08-03
- 1.4.5 — 2020-12-17
- 1.4.4 — 2020-12-02
- 1.4.3 — 2020-12-01
- 1.4.2 — 2020-12-01
- 1.4.1 — 2019-12-16
- 1.4.0 — 2019-09-08
- 1.3.0 — 2019-09-08
- 1.2.5 — 2019-09-07
- 1.2.4 — 2019-06-22
- 1.2.3 — 2019-06-13
- 1.2.2 — 2019-04-08
- 1.2.1 — 2019-03-11
- … 22 more at https://npm.io/package/vuex-pathify/versions

## README

![splash](https://raw.githubusercontent.com/davestewart/vuex-pathify/master/docs/assets/img/readme/splash-github.png)

## Overview

Pathify makes working with Vuex **easy**, with a **declarative**, **state-based**, **path syntax**:

![pathify-diagram](https://raw.githubusercontent.com/davestewart/vuex-pathify/master/docs/assets/img/readme/pathify-path.png)


Paths can reference any **module**, **property** or **sub-property**:

![pathify-diagram](https://raw.githubusercontent.com/davestewart/vuex-pathify/master/docs/assets/img/readme/pathify-diagram.png)

Pathify's aim is to simplify the overall Vuex development experience by abstracting away Vuex's complex setup and reliance on manually-written code. The path syntax does the heavy-lifting, with a small set of helper functions used to directly access or wire up components to the store.

## Examples

> Pathify Version 3.x works with Vue 3. For Vue 2, see the 1.x branch

**Get** or **set** data without **syntax juggling** or worrying about **implementation**:

```js
store.get('loaded')
store.set('loaded', true)
```

Reach into **sub-properties** and **arrays**:

```js
store.get('products@items.0.name')
store.set('products@items.1.name', 'Vuex Pathify')
```

Set up **one or two-way** data binding on **any** store value without **bloat** or **fuss**:

```js
setup () {
  return {
    products: get('products'),
    category: sync('filters@category')
  }
}
```

Wire **multiple** properties (or sub-properties) using **array**, **object** and **wildcard** formats:

```js
setup () {
  return {
    ...sync('filters@sort', [
      'order', 
      'key'
    ]),
  
    ...sync('filters@sort', {
      sortOrder: 'order',
      sortKey: 'key'
    }),
  
    ...sync('filters@sort.*')
  }
}
```

Use **variable expansion** to dynamically reference store properties:

```js
setup () {
  return {
    product: get('products@items:index')
  }
}
```

Set up mutations – **including sub-property mutations** – in a single line:

```js
make.mutations(state)
```

## Results

In practical terms, Pathify results in:

- less cognitive overhead
- zero store boilerplate
- one-liner wiring
- cleaner code
- lighter files

The [code comparison](https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main?initialpath=%23%2Fcode%2Flarge) demo demonstrates reductions in lines of code of between **2 and 14 times** (or more) depending on store size and setup.

To see the principles behind such radical code reduction, check out the [Pathify 101](https://davestewart.github.io/vuex-pathify/#/intro/pathify).

## Next steps

Get started:

- [Installation](https://www.npmjs.com/package/vuex-pathify)
- [Documentation](https://davestewart.github.io/vuex-pathify)

Vue 3 demo:

- [Vue 3](https://github.com/davestewart/vuex-pathify-demos/tree/master/vue-3)


Vue 2 demos:

- [Simple demo](https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/simple)
- [Main demo](https://codesandbox.io/s/github/davestewart/vuex-pathify-demos/tree/master/main)
- [Nuxt demo](https://github.com/davestewart/vuex-pathify-demos/tree/master/nuxt)

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