Install

$ npm install -S vuex-up

CDN

• umd: https://unpkg.com/vuex-up/dist/vuex-up.umd.js
• esm/mjs: https://unpkg.com/vuex-up/dist/vuex-up.esm.js
• commonjs: https://unpkg.com/vuex-up/dist/vuex-up.cjs.js

Mixing modules

const listWithCounterModule = vuexUp(listModule);

listWithCounterModule
    .mixin(counterModule)
    .mixin({
        actions: {
            addItem({ commit }, item) {
                commit('add', item);
                commit('increaseCounter');
            }
        }
    });

new Vuex.Store({
    state: {},
    modules: {
        list: listWithCounterModule.create()
    }
});

live example

import Vue from 'vue';
import Vuex from 'vuex';
import {vuexUp} from 'vuex-up';

Vue.use(Vuex);

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increaseCounter(state) {
            state.count++;
        }
    }
};

const listModule = {
    state: {
        list: []
    },
    mutations: {
        add(state, item) {
            state.list.push(item);
        }
    }
};

const listWithCounterModule = vuexUp(listModule);

listWithCounterModule
    .mixin(counterModule)
    .mixin({
        namespaced: true,
        actions: {
            addItem({ commit }) {
                const item = 'I`m item';
                commit('add', item);
                commit('increaseCounter');
            }
        }
    });

const store = new Vuex.Store({
    state: {},
    modules: {
        list: listWithCounterModule.create()
    }
});

store.dispatch('list/addItem');

console.log(store.state.list.count); // 1

store.commit('list/increaseCounter');

console.log(store.state.list.count); // 2

Services in actions, getters and mutations

const listModule = vuexUp(baseListModule);

listModule.mixin({
    namespaced: true,
    actions: {
        addItem({ commit }, id, services) {
            const item = services.Items.get(id);
            commit('add', item);
        }
    }
});

listModule.service('Items', {
    get(id) {
        return `I\`m item with id "${id}"`;
    }
});

const store = new Vuex.Store({
    state: {},
    modules: {
        list: listModule.create()
    }
});

live example

import Vue from 'vue';
import Vuex from 'vuex';
import {vuexUp} from 'vuex-up';

Vue.use(Vuex);

const baseListModule = {
    state: {
        list: []
    },
    mutations: {
        add(state, item) {
            state.list.push(item);
        }
    }
};

const listModule = vuexUp(baseListModule);

listModule.mixin({
    namespaced: true,
    actions: {
        addItem({ commit }, id, services) {
            const item = services.Items.get(id);
            commit('add', item);
        }
    }
});

listModule.service('Items', {
    get(id) {
        return `I\`m item with id "${id}"`;
    }
});

const store = new Vuex.Store({
    state: {},
    modules: {
        list: listModule.create()
    }
});

store.dispatch('list/addItem', '1');

console.log(store.state.list.list); // ['I`m item with id "1"']