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 = createAction(
  'fetch',
  (id) => ({ id }),
  (id, resolve, reject) => ({ resolve, reject }),
);
 
// then:
const action = fetch(4, res, rej);
store.dispatch(action);

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 = createAction(
  'fetch',
  createPayload([ 'id' ]),
  createPayload([ 'resolve', 'reject' ], 1),
);
 
fetch(4, res, rej)

createDispatch

(
  type: string,
  payloadCreator?: Function,
  metaCreator?: Function,
  store?: Object,
) => (...args) => 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 = createDispatch('fetch', (x) => x, store);
 
fetch('x').then(...);

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 = createDispatch('fetch');
 
// later
const dispatcher = fetch(store);
// later still
dispatcher().then(...);

createCommit

(
  type: string,
  payloadCreator?: Function,
  metaCreator?: Function,
  store?: Object,
) => (...args) => void

Similar to createDispatch but for triggering a commit.

combineActions

(...actions: Array<Object>) => Object

Takes a number of objects that contain actions and combines them. Any same-keyed actions are run together.

const actions = combineActions(
  {
    fetch: (context, payload) => { /* ... */ },
  },
  {
    fetch: (context, payload) => { /* ... */ },
  },
);
 
// later
store.dispatch('fetch');
// will dispatch both fetch actions

combineActionArray

(actions: Array<Object>) => Object

An array version of combineActions.

combineMutations

(...mutations: Array<Object>) => Object

Takes a number of objects that contain mutations and combines them. Any same-keyed mutations are run together.

const mutations = combineMutations(
  {
    FETCH: (state, payload) => { /* ... */ },
  },
  {
    FETCH: (state, payload) => { /* ... */ },
  },
);
 
// later
store.dispatch('FETCH');
// will dispatch both fetch mutations

combineMutationArray

(mutations: Array<Object) => Object

An array version of combineMutations

combineModules

(...modules: Array<Object>) => Object

Takes a number of modules and combines them.

combineModuleArray

(modules: Array<Object>) => Object

An array version of combineModules

mapToCommit

(key: string) => Function

Takes the key of a mutation and automatically commits it when the specified action is caled.

const actions = {
  fetch: mapToCommit('FETCH'),
};

filter

(
  predicate: (...args) => boolean,
  fn: (...args) => any,
) => Function

wraps an action or commit in a function that only executes when the given predicate passes.

const actions = {
  fetch: filter(
    (context, payload) => payload.key === 4,
    (context, payload) => { /* ... */ },
  ),
};

Filter is also curried, meaning you can create helper functions:

const onlyForKey = filter((context, payload) => payload.key === 4);
 
const actions = {
  fetch: onlyForKey(() => { /* ... */ }),
};

dispatchCommits

(module: Object) => Object

takes all mutations in a module and creates an action for each one.

const module = dispatchCommits({
  mutations: {
    fetch: (state, payload) => { /* ... */ },
  },
});
 
store.dispatch('fetch'); // 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 = {
  submitting: () => { /* ... */ },
  submitted: () => { /* ... */ },
};
const actions = {
  doSomething: () => { /* ... */ },
  submitted: () => { /* ... */ },
  submit: async ({ commit, dispatch }) => {
    commit('submitting');
    await dispatch('doSomething');
    commit('submitted');
    await dispatch('submitted');
  },
};

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:

({ commit, dispatch }) => {
  dispatch('submitting');
  dispatch('doSomething');
  dispatch('submitted');
}