Vuex

Vuex

by WILLIAM CORREA

HTML

<div id="example">
    <input v-model="name">
    <h1>Body</h1>
    <p>
        <router-link to="/foo">foo</router-link>
        <router-link to="/bar">bar</router-link>
    </p>
    <hr>
    <router-view></router-view>
</div>

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="https://npmcdn.com/vuex/dist/vuex.js"></script>

JavaScript

const store = new Vuex.Store({
    state: {
        name: 'William'
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        }
    },
    actions: {
        updateName({
            commit
        }, payload) {
            commit('updateName', payload)
        }
    }
})

const Foo = Vue.extend({
  template: '<p>This is foo! <br><input v-model="name"/></p>',
    computed: {
        name: {
            get() {
                return this.$store.state.name
            },
            set(name) {
                this.$store.dispatch('updateName', name)
            }
        }
    }
});

const Bar = Vue.extend({
  template: '<p>This is bar! <br><input v-model="name"/></p>',
    computed: {
        name: {
            get() {
                return this.$store.state.name
            },
            set(name) {
                this.$store.dispatch('updateName', name)
            }
        }
    }
});

const router = new VueRouter({ routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
});

new Vue({
    router,
    store,
    el: '#example',
    computed: {
        name: {
            get() {
                return this.$store.state.name
            },
            set(name) {
                this.$store.dispatch('updateName', name)
            }
        }
    }
});