JSFiddle - React, Tailwind, and code Playground

by mr_hokid

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vuex-up"></script>

JavaScript

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.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