페이지를 새로 고치면 성별 정보가 사라집니다.

페이지를 새로 고치면 성별 정보가 사라집니다.

변수 이름 지정jso페이지를 새로 고치면 사라집니다.또한 매장 정보를 보내는 방법 외에 다른 방법이 있습니까?버튼을 사용하지 않고 페이지를 새로 고치고 다시 열면 작동합니다.

view/user Profile.표시하다

<template>
<div>

<v-list>
  <v-list-item>
  {{userdata['username']}}</v-list-item>
 <v-list-item>  {{userdata['id']}}</v-list-item>
  <v-list-item>  {{userdata['email']}}</v-list-item>
  <v-list-item>  {{userdata['phone_number']}}</v-list-item>
  <v-list-item>  {{userdata['first_name']}} {{userdata['last_name']}}</v-list-item>
<v-list-item >   {{userdata['gender']}}</v-list-item>

 {{userdata['educational_status']}}


</v-list>
<hr>
{{this.profileData.gender}}

{{jso}}  --> variable that disappears on page refresh



</div>
</template>

<script>

새로 고침 페이지에서 jso만 사라집니다.

  import Vuetify from "vuetify"
  import {UserData} from "../../store/userModule";
  import {JsonChoiceData} from "../../store/choiceStore";
  import jsonDict from "../../jsonFiles/data.json"
  import JsonFile from "../../jsonFiles/jsonfile"


  export default {
    name: "userProfile",

  data(){
    return {
      profileData:{
        username:'',
        first_name:'',
        last_name: '',
        email:'',
        phone_number:'',
        birthday:'',
        gender:'',
        educational_status:'',
        martial_status:'',

      },

    }
  },

  created(){
    this.$store.dispatch('initUserData')
    this.$store.dispatch('inijson')
   
  },

    computed:{
    jso(){
      return this.$store.getters.user
    },


userdata (){

  for(var i in this.$store.getters.getUser){
    return this.$store.getters.getUser[i]
  }
    return this.$store.getters.getUser},


    },

    methods:{
      getjsondata(){
        console.log(this.userdata['gender'] + "methods")
        this.$store.dispatch('getJsonData',this.userdata['gender'])
        console.log(this.userdata['gender'])

      }
    },

    mounted(){
      this.getjsondata()


    }


  }
</script>

<style scoped>

</style>

가게

import JsonFiles from '../jsonFiles/jsonfile'
import Jsondict from '../jsonFiles/data.json'
import jsonfile from "../jsonFiles/jsonfile";

export  const JsonChoiceData = {

state: {
user: [],


},
 getters: {
 user(state) {
  return state.user
 },
 },


 mutations: {

inijson(state, user) {
  state.user = user
},


getsonData: function (state, userinput) {

  var getJsoncleandata = jsonfile.JsonData(userinput, Jsondict.Gender)


    state.user = getJsoncleandata

    return getJsoncleandata

 }

},

actions: {

inijson(context){
  context.commit('inijson', this.getsonData)

},


getJsonData(context,userinput){

  context.commit('getsonData',userinput)

}

}
}

getsonData다른 돌연변이의 페이로드로 사용해서는 안 됩니다.또, 디스패치 하려고 하고 있습니다.initUserData스토어 내에 없는 액션을 수행합니다.내 생각엔 네가 이 일에 전념할 수 있을 것 같아.getsonData내면의 돌연변이inijson액션.

mutations: {
    ...,
    getsonData: function(state, userinput) {
        const getJsoncleandata = jsonfile.JsonData(userinput, Jsondict.Gender);
        state.user = getJsoncleandata;
    }
    ...
},
actions: {
    inijson(context) {
        context.commit('getsonData', null)
    },
    ...
}

그런 다음 컴포넌트 디스패치 전용 후크 생성inijson액션:

...
created() {
  this.$store.dispatch('inijson')
},
...

이상한 날짜가 보이면 꼭 확인하세요.jsonfile.JsonData(userinput, Jsondict.Gender)약속은 반환되지 않습니다.

글로벌을 사용하는 대신$store또한 vuex 스토어 맵퍼의 사용을 고려할 수 있습니다.컴포넌트 바인딩 도우미

언급URL : https://stackoverflow.com/questions/63440207/gender-information-disappears-when-the-page-is-refreshed