Vuex state is sometimes empty (undefined), especially when I refresh the page and sometimes it works

Question

Vuex state is sometimes empty (undefined), especially when I refresh the page. And sometimes it works.

action:

getSkills(context) {
  let url = "/skills";
  const headers = {
    "x-api-key": process.env.VUE_APP_SIRH_X_API_KEY,
    Authorization: localStorage.getItem("access_token"),
  };
  return axios({
    method: "get",
    url: url,
    headers: headers,
  }).then((response) => {
    context.commit("getSkill", response.data.data.skills);
  }).catch((e) => {
    console.log(e);
  });
},

getter:

Skills: (state) => state.Skills,

mutation :

getSkill(state, skills) {
  state.Skills = skills;
},

state :

Skills: [],

and the vue :

computed: {
  ...mapState({}),
  ...mapGetters(["Candidate", "Skills"])
},
mounted() {
  this.getSkills();
  this.id = this.$route.params.id;
  this.Skills.forEach(element => this.skill_list.push(element.skill_name));
},
methods: {
  ...mapActions(["attachSkillCandidate", "getSkills"]),
}

Can anyone help me to solve this issue ?

Thanks!

Answer 1

The getSkills action is performing an asynchronous request. You need to wait for the request to finish before you can access this.Skills otherwise the data will not be set yet.

You need async and await (the "modern" solution):

async mounted() {
  await this.getSkils();
  this.id = this.$route.params.id;
  this.Skills.forEach(element => this.skill_list.push(element.skill_name));
}

or:

mounted() {
  this.getSkils().then(() => {
    this.id = this.$route.params.id;
    this.Skills.forEach(element => this.skill_list.push(element.skill_name));
  });
}