[Vuejs]-Why is the value in input not load with a value from vuex?

by

0👍

✅

You are trying to set up the value of a computed property which do not have any setter for it. Now, without any set method declared for your computed property, this line of your code

this.name = localStorage.getItem('name');

won’t cause any reactive change or mutate the state in the vuex store. You should read more about form handling in vuex to get a better understanding for it.

To solve your problem, you just need to commit the ‘persist’ mutation in your mounted hook with the fetched data from the local storage.

<f7-list-input
placeholder="Username"
type="text"
:value="name"
@input="onPersist"/>

export default {
 mounted() {
  if (localStorage.name) {
    // 'name' is a computed property without a setter
    // hence, below line in your code doesn't reflect change
    //
    // this.name = localStorage.getItem('name');
    //
    // instead you should commit the value to the store
    // and let vuex take care of everything

    const existingName = localStorage.getItem('name');
    this.$store.commit('persist', existingName);
  }
 },

 computed:{
   name(){
    return this.$store.state.name;
   }
 },

 methods:{
  onPersist(){
    this.$store.commit('persist',event.target.value);
  }
 }
};

Leave a comment