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/dist/vuex-up.umd.js"></script>

JavaScript

Vue.use(Vuex);

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

const listModule = VuexUp.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"']