Why is the value in input not populated with a value from vuex?

Question

The task is to ensure that the value entered in input is saved when entered into vuex and already in vuex saved in localstorage , and then if the application was closed, then when reopened, the value stored in localstorage should be returned to input . Now for some reason my input value is not saved. Please tell me what I'm doing wrong or, if possible, correct the code. Thank!

Component itself

<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 storage

 export default new Vuex.Store({ state: { name: '' }, mutations: { persist(state,payload){ state.name = payload; localStorage.setItem('name', state.name); }, } });

Accepted Answer · 2019-04-11T19:08:57

You can write from the component properties in the storage using getters / setters.

Check with localStorage here https://jsfiddle.net/v3b28j5m/1/

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

 <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>

The problem is that I need to do this with the help of framework7, and v-model is not supported in it. I’m doing this through v-bind: value and @input, but for some reason I can’t write the value in vuex and return him.

Why is the value in input not populated with a value from vuex?

1 answer 1

More articles: