vuex-up

Extends vuex module features

---

Documentation

---

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

Full code:

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

Full code:

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"']

---

More examples in documentation