刷新頁面時性別信息消失

Question

刷新頁面時名為jso的變量會消失。 另外，除了方法之外，還有其他方法可以發送商店信息嗎？ 當頁面被刷新並重新打開而不使用按鈕時，它將起作用。

查看/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>

只有 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)

}

}
}

Answer 1

getsonData是一個突變，不應用作另一個突變的有效負載。 您還嘗試發送不在您的商店內的initUserData操作。 我認為您可以嘗試在inijson操作中提交getsonData突變。

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)不返回 Promise。

除了使用全局$store之外，您還可以考慮使用 vuex 存儲映射器。 組件綁定助手