Gender information disappears when the page is refreshed

user_14110835 0
Viewed 51

Variable named jso disappears when the page is refreshed. Also, is there any other way to send store information than method? It will work when the page is refreshed and reopened without using a button.

view/userProfile.vue

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

Only jso disappears on refresh page:

  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>

store

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)

}

}
}
vuex vue.js javascript
1 Answers

getsonData is a mutation and shouldn't be used as payload of another mutation. You are also trying to dispatch initUserData action which is not inside your store. I think that you can try to commit getsonData mutation inside your inijson action.

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

Then inside created hook of your component dispach only inijson action:

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

If you see strange date make sure that jsonfile.JsonData(userinput, Jsondict.Gender) doesn't return a Promise.

Instead of using global $store you can also consider to use vuex store mappers. component binding helpers

user_90959880
Related