JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<main>
    The current value of 'field' is <strong v-text="field"></strong>
    <hr />
    <input type="text" v-model="field">
</main>

JavaScript

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        field: "Hello World"
    },
    mutations: {
        updateField: (state, val) => state.field = val,
    },
    actions: {
        updateField: ({commit}, val) => commit('updateField', val),
    },
});

new Vue({
    el: "main",
    store,
    
    computed: {
        field: {
            get() {
                return this.$store.state.field;
            },
            set: _.debounce(function(val) {
                this.$store.dispatch('updateField', val);
            }, 1000),
        },
    },
});