Vue.js State value reset from the input after hard refresh. How to fix it?

Question

I'm new to Vue.js and I have created an edit profile page where users can edit basic information like:

• First Name
• Last Name
• Email

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

Answer 1

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.