how to keep calculating each time the page is refreshed

Question

I cannot assign the value of the calculated user data to the object in the data, but the data is lost when the page is refreshed.

import Vuetify from "vuetify"
import {
  UserData
} from "../../store/userModule";
import jsonDict from "../../jsonFiles/data.json"
import jsonfile from "../../jsonFiles/jsonfile";
export default {
  name: "userProfileUpdate",
  data() {
    return {
      selected: "Choose Province",
      rules: [
        value => !!value || 'Bu alan boş bırakılamaz',
        value => (value || '').length <= 20 || 'Max 20 characters',
        value => {
          const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          return pattern.test(value) || 'Geçersiz e posta'
        },
      ],
      options: jsonDict.Gender,
      options2: jsonDict.educational_status,
      educational_status: '',
      gender: '',
      birthday: '',
      email: '',
      phone_number: '',
      username: '',
      first_name: '',
      last_name: '',
      profileData: {


      }
    }

  },


  created() {

    this.$store.dispatch('initUserData')
    this.$store.dispatch('inijson')

  },

I have tried many ways it disappears when the page is refreshed even creating computed data but somehow it could not keep the data on the screen after the page refresh

  computed: {
    genderq() {
      for (var i in this.$store.getters.user) {
        return this.$store.getters.user[i]
      }
      return this.$store.getters.user
    },
    userdata() {
      for (const i in this.$store.getters.getUser) {
        var data = this.$store.getters.getUser[i]

        this.username = data['username']
        //this.$store.dispatch('getJsonData',data['gender'])
        return data
      }
      return this.$store.getters.getUser

    },
  },

Answer 1

Hey you could try using localStorage or sessionStorage, and add the mounted() property to your component (this property is fired when the component is mounted) and then you could affect your data() values from the localStorage for example

data() => { myData: 0 },
computed()=>{
 storeValue(){
    localStorage.setItem('data', this.myData)
  }
},
mounted() =>{
  localStorage.getItem('data') ? this.myData = localStorage.getItem('data') : null //null because in data() myData has a default value but you can say this.myData = 0
}

With the mounted lifecycle property and the browser storage, you will have a trace of every value you want to keep between 2 refreshes (look for both localstorage and sessionStorage as they don't last the same time), basically, you can have a method (not a computed) that stores the object you want in the storage, then you can call this method at the end of every computed property that modifies the data you want to keep between refreshes.

edit: here is a link to help you to understand the lifecycle of a vue component it might help you later too if you want to create more complex components, lifecycle diagram

Best regards