페이지를 새로 고칠 때마다 계속 계산하는 방법

페이지를 새로 고칠 때마다 계속 계산하는 방법

계산된 사용자 데이터의 값을 데이터 내의 개체에 할당할 수 없지만 페이지가 새로 고쳐지면 데이터가 손실됩니다.

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

  },

계산 데이터를 생성해도 페이지가 갱신되면 없어지는 방법을 여러 번 시도해 보았지만, 페이지 갱신 후 화면에 데이터가 남아 있지 않았습니다.

  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

    },
  },

localStorage 또는 sessionStorage를 사용하여 component에 mounted() 속성을 추가하고(이 속성은 component가 마운트되면 실행됨), localStorage의 data() 값에 영향을 줄 수 있습니다.

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
}

마운트된 라이프 사이클 속성과 브라우저 스토리지를 사용하면 2회 갱신 사이에 유지하는 모든 값의 트레이스를 얻을 수 있습니다(localstorage와 sessionStorage는 동시에 지속되지 않으므로 둘 다 참조). 기본적으로 스토리지에 원하는 개체를 저장하는 메서드(계산되지 않음)를 사용할 수 있습니다.이 메서드는 다음에서 호출할 수 있습니다.새로 고침 간에 유지할 데이터를 수정하는 모든 계산 속성의 끝.

편집: 이 링크에서는 vue 컴포넌트의 라이프 사이클을 이해할 수 있습니다.더 복잡한 컴포넌트를 작성하려면 나중에 도움이 됩니다.라이프 사이클 다이어그램

안부 전합니다

언급URL : https://stackoverflow.com/questions/63452801/how-to-keep-calculating-each-time-the-page-is-refreshed