A tiny (less than 1kb min'd) zero-dependency Vuex plugin to help create computed
bindings for form fields in Vue 3.
For Vue 3
yarn add vuex-use-fields
For Vue 2 + Composition API
yarn add vuex-use-fields@two
To set up the store helpers, and give this plugin a reference to the store:
import { setupStore, getField, setField } from 'vuex-use-fields'
const store = {
state: { ... },
mutations: { setField },
getters: { getField },
plugins: [ setupStore ]
}
To use in a component:
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'
})
}
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'])
anduseFields(['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.
import { createFieldMapper } from 'vuex-use-fields'
const useFieldsInMyNamespace = createFieldMapper({ getter: 'myNamespace/getField', setter: 'myNamespace/setField' })
export default {
setup: () => ({
...useFieldsInMyNamespace(['path.to.field.one'])
})
}
- 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.
If a component uses this plugin in Vue 2, it must either:
- use the composition API's
setup
function, and not thecomputed
block from option API - be sourced after
@vue/composition-api
has been installed