vuex-scaffold
Scaffolding methods to compose your Vuex store
createAction
type: string payloadCreator?: Function metaCreator?: Function ...args type: string payload: Object meta: Object
Aside from the standard dispatch(type, payload)
, Vuex also supports an action object, i.e. dispatch({ type: 'foo' })
. A common pattern is to use an action creator to generate the action object.
createAction
allows you to compose this action creator.
const fetch = ; // then:const action = ;store;
createPayload
keys: Array<string> offset?: number ...values Object
A helper that creates a payload object from an array of keys. Use it in conjunction with createAction
.
const fetch = ;
createDispatch
type: string payloadCreator?: Function metaCreator?: Function store?: Object Promise
Similar to createAction
expect it also expects a store
object. When you all the action it will automatically dispatch it as well.
const fetch = ; ;
Store is a curried parameter, meaning if you don't pass it in, it will return a function that takes the store. Meaning you can do something like this:
const fetch = ; // laterconst dispatcher = ;// later still;
createCommit
type: string payloadCreator?: Function metaCreator?: Function store?: Object void
Similar to createDispatch
but for triggering a commit.
combineActions
Object
Takes a number of objects that contain actions and combines them. Any same-keyed actions are run together.
const actions = ; // laterstore;// will dispatch both fetch actions
combineActionArray
Object
An array version of combineActions
.
combineMutations
Object
Takes a number of objects that contain mutations and combines them. Any same-keyed mutations are run together.
const mutations = ; // laterstore;// will dispatch both fetch mutations
combineMutationArray
Object
An array version of combineMutations
combineModules
Object
Takes a number of modules and combines them.
combineModuleArray
Object
An array version of combineModules
mapToCommit
Function
Takes the key of a mutation and automatically commits it when the specified action is caled.
const actions = fetch: ;
filter
boolean any Function
wraps an action or commit in a function that only executes when the given predicate passes.
const actions = fetch: ;
Filter is also curried, meaning you can create helper functions:
const onlyForKey = ; const actions = fetch: ;
dispatchCommits
Object
takes all mutations in a module and creates an action for each one.
const module = ; store; // will trigger the fetch mutation
This means you no longer have to differentiate between your actions and mutations. It also means you can isolate your action as you don't need to know what is a mutation or an action.
const mutations = { /* ... */ } { /* ... */ };const actions = { /* ... */ } { /* ... */ } submit: async { ; await ; ; await ; };
In the above example, the submit action has to be aware of the fact that submitting
is a mutation, doSomething
is an action, and submitted
is both an action and a mutation.
It would be much better if your action could dispatch actions and not have to be aware of the context. Using dispatchCommits
, submit would look something like:
{ ; ; ;}