Vuex Utils
Utility functions for common Vuex patterns. Creates state (or state method) and mutations
Common patterns
- Set a property, with an initial value.
- Reset a property to an initial value.
- Toggle a boolean.
- Create a model from a state+mutation.
-
combineinto a state/mutations object
Specific patterns (extensions of the common patterns)
- Loading: true/false (initially false)
- Email set/reset.
- Password with show/hide property
Getting started
npm install vuex-utils- Use to build your state
Examples
Typical login form
import {makeEmail, makeDisplayablePassword, makeErrorMessage} from 'vuex-utils/form'
import {combine} from 'vuex-utils'
const {state, mutations} = combine(
makeEmail,
makeDisplayablePassword,
makeErrorMessage
)
/*
> state: {
email: '',
password: '',
hidePassword: true,
errorMessage: {}
}
> mutations: {
setEmail: ...,
resetEmail: ...,
setPassword: ...,
resetPassword: ...,
setErrormessage: ...,
resetErrormessage: ...,
toggleHidepassword: ...,
resetHidepassword: ...,
}
*/
Method that clones the state
import {combine, makeSetter} from 'vuex-utils'
import {makeLoading} from 'vuex-utils/loading'
const {state, mutations} = combineFunction(
makeLoading,
[makeSetter, 'amount', 0] // or makeSetter('amount', 0) with makeSetter imported from 'vuex-utils/factories'
)
/*
State is now a method that returns a clone of the state object, as Vuex expects
> state: () => {
loading: false,
amount: 0
}
> mutations: {
loadingTrue: ...,
loadingFalse: ...,
setAmount: ...
}
*/Changelog
- add
makeArrayto handle arrays in state and basic mutations for adding, removing and clearing array (mutating) - new collaborator, thank you @clive07
