I'm new to Vue.js and I have created an edit profile page where users can edit basic information like:
Example Of Input:
<b-col sm="6">
<b-form-group
label="First Name"
label-for="firstName"
>
<validation-provider
#default="{ errors }"
name="First Name"
rules="required"
>
<b-form-input
id="firstName"
v-model="firstName"
placeholder="First Name"
name="firstName"
/>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>
</b-col>
Now I'm loading user value from the state value like this:
data() {
return {
firstName: '',
lastName: '',
email: '',
required,
}
},
mounted() {
this.firstName = this.$store.state.authUser.user.firstName
this.lastName = this.$store.state.authUser.user.lastName
this.email = this.$store.state.authUser.user.email
},
It's working perfectly and showing value in the input. But when the user hits the hard refresh the values are gone from all the inputs.
Any idea how to resolve this problem? I can't find any way as I'm new in Vue.js and working on the first project.
Thanks
The store is only in the memory, so if the page is refreshed all data is gone.
There are serveral ways to save the data in the browser and keep it, even after refresh. I would suggest looking in something like: https://github.com/robinvdvleuten/vuex-persistedstate
I also found your question already answered here: Vuex state on page refresh
There it is also suggested to use persisted state like this: import { Store } from 'vuex' import createPersistedState from 'vuex-persistedstate' import * as Cookies from 'js-cookie'
const store = new Store({
// ...
plugins: [
createPersistedState({
getState: (key) => Cookies.getJSON(key),
setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
})
]
})
Also since you are a beginner here is a trick to make your code a litter more neato. Import mapState like this:
import { mapState } from 'vuex';
And use your store variables like this:
computed: {
...mapState({
firstName: state => state.authUser.user.firstName,
lastName: state => state.authUser.user.lastName ,
email: state => state.authUser.user.email ,
}),
},
Then you can use these as usual.