Почему значение на входе не загружается со значением из vuex?

Question

Мне нужно сделать значение , введенное в ввод , сохраненное в vuex , а затем в vuex хранилище, сохраненное в localstorage , а затем, если приложение было закрыто, при повторном открытии значение, сохраненное в localstorage, должно быть возвращено на вход. Теперь по какой-то причине мое входное значение не сохраняется. Пожалуйста, скажите мне, что я делаю неправильно или, если возможно, исправьте код. Спасибо!

Сomponent

<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(){
        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);
       },
    }
});

Answer 1

Вы пытаетесь установить значение вычисляемого свойства, для которого нет никакого установщика для него. Теперь, без какого-либо метода set, объявленного для вашего вычисляемого свойства, эта строка вашего кода

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

не вызовет каких-либо реактивных изменений или изменения состояния в хранилище vuex. Вы должны прочитать больше об обработке форм в vuex , чтобы лучше понять ее.

Чтобы решить вашу проблему, вам нужно просто зафиксировать мутацию 'persist' в подключенном хуке с выбранными данными из локального хранилища.

<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);
  }
 }
};