JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js">
</script>
<div id="app">
<input placeholder="Username" type="text" :value="name" @input="setValue"/>
</div>
JavaScript
const store = new Vuex.Store({
state: {
name: ''
},
mutations: {
persist(state, payload) {
state.name = payload;
console.log(payload)
localStorage.setItem('name', state.name);
}
}
});
new Vue({
store,
el: '#app',
computed: {
name: {
get() {
return this.$store.state.name;
}
}
},
methods: {
setValue(e) {
this.$store.commit('persist', e.target.value);
}
},
created() {
this.$store.state.name = localStorage.getItem('name');
}
});