To ensure that the value entered in the input is saved into Vuex and then stored in localstorage, follow these steps. If you close the application and reopen it, the value from localstorage should be returned to the input field. However, if your input value is not being saved, there could be an issue with the code. Please review the following and let me know what needs correction:
Component
<f7-list-input
placeholder="Username"
type="text"
v-bind:value="name"
@input="onPersist"
/>
export default {
mounted() {
if (localStorage.name) {
this.name = localStorage.getItem('name');
}
},
computed:{
name(){
return this.$store.state.name;
}
},
methods:{
onPersist(event){
this.$store.commit('persist', event.target.value);
}
}
};
</script>
VUEX store
export default new Vuex.Store({
state: {
name: ''
},
mutations: {
persist(state,payload){
state.name = payload;
localStorage.setItem('name', state.name);
},
}
});