# vuex-use-fields

> A tiny (less than 1kb min'd) zero-dependency Vuex plugin to help create `computed` bindings for form fields in Vue 3.

Latest version **2.1.1** (published 2020-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-use-fields
pnpm add vuex-use-fields
yarn add vuex-use-fields
bun add vuex-use-fields
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2020-04-12 |
| First published | 2019-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Dave Honneffer |
| Maintainers | pearofducks |
| Keywords | vue 3, vuex, composition-api |

## Links

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

## Recent versions

- 2.1.1 (latest) — 2020-04-12
- 2.1.1-composition (two) — 2020-04-12
- 2.1.0-composition — 2020-04-09
- 2.1.0 — 2020-04-09
- 2.0.0 — 2020-04-09
- 1.1.0 — 2019-12-29
- 1.0.0 — 2019-12-24

## README

# vuex-use-fields

A tiny (less than 1kb min'd) zero-dependency Vuex plugin to help create `computed` bindings for form fields in Vue 3.

## install

For Vue 3

```shell
yarn add vuex-use-fields
```

For Vue 2 + Composition API

```shell
yarn add vuex-use-fields@two
```

## use

To set up the store helpers, and give this plugin a reference to the store:

```js
import { setupStore, getField, setField } from 'vuex-use-fields'

const store = {
  state: { ... },
  mutations: { setField },
  getters: { getField },
  plugins: [ setupStore ]
}
```

To use in a component:

```js
import { useFields } from 'vuex-use-fields'

export default {
  setup: () => ({
    ...useFields({
      fieldOne: 'path.to.field.one' // creates a ref named 'fieldOne'
    }),
    ...useFields(['path.to.field.one']) // creates a ref named 'one'
  })
}
```

### namespaces

If you install the `getField` and `setField` helpers at the root of your store, you can use the `useFields` function normally, and reference your namespaces in your paths.
- `useFields(['myNamespace/path.to.field.one'])` and `useFields(['myNamespace.path.to.field.one'])` are both fine

You can also install the helpers at the namespace level, and then use `createFieldMapper` to make a new `useFields` instance specific to that namespace.

```js
import { createFieldMapper } from 'vuex-use-fields'
const useFieldsInMyNamespace = createFieldMapper({ getter: 'myNamespace/getField', setter: 'myNamespace/setField' })

export default {
  setup: () => ({
    ...useFieldsInMyNamespace(['path.to.field.one'])
  })
}
```

## goals

- Keep module size as small as possible, even if this means limiting extra features
- Include `createFieldMapper` to support deep objects as well as namespaced stores
- Support both Vue 2 (through the Composition API), and Vue 3

*anti-goals*

- For now, Typescript support is not a priority of this plugin, this will be revisited once Vue 3 and Vuex 4 are released.

## caveats

If a component uses this plugin in Vue 2, it must either:
- use the composition API's `setup` function, and not the `computed` block from option API
- be sourced after `@vue/composition-api` has been installed

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