Nana Plays Minesweeper

    vuex-scaffold

    0.2.0 • Public • Published

    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');
    }

    Keywords

    none

    Install

    npm i vuex-scaffold

    DownloadsWeekly Downloads

    2

    Version

    0.2.0

    License

    Apache-2.0

    Unpacked Size

    32.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • jackmellis