Extends vuex module features
$ npm install -S vuex-up
- 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
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:
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
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:
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"']