JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.js"></script>
<div id="app">
<form>
<input placeholder="firstName" v-model="user.firstName">
<input placeholder="lastName" v-model="user.lastName">
<input placeholder="age" v-model="user.age">
</form>
<pre>{{ $store.state.user }}</pre>
</div>
JavaScript
const store = new Vuex.Store({
state: {
user: {
firstName: '',
lastName: '',
age: '',
},
},
mutations: {
updateUser(state, payload) {
Object.assign(state.user, payload);
},
},
});
new Vue({
el: '#app',
store,
computed: {
user() {
return new Proxy(this.$store.state.user, {
set: (target, prop, value) => {
this.$store.commit('updateUser', { [prop]: value });
return true;
},
});
},
},
});