2.1.1 • Published 4 years ago
vuex-use-fields v2.1.1
vuex-use-fields
install
yarn add vuex-use-fields@two
use
To set up the store helpers, and give this plugin a refernce 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 '../../index.js'
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'])
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.
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 thecomputed
block from option API - be sourced after
@vue/composition-api
has been installed
2.1.1-composition
4 years ago
2.1.1
4 years ago
2.1.0-composition
4 years ago
2.1.0
4 years ago
2.0.0
4 years ago
1.1.0
4 years ago
1.0.0
4 years ago