Состояние Vuex иногда пустое (неопределенное), особенно когда я обновляю sh страницу и иногда это работает

Question

Состояние Vuex иногда пустое (неопределенное), особенно когда я обновляю sh страницу. И иногда это работает.

действие:

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,

мутация:

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

состояние:

Skills: [],

и 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"]),
}

Может кто-нибудь помочь мне решить эту проблему?

Спасибо!

Answer 1

Действие getSkills выполняет асинхронный запрос . Вам нужно подождать, пока запрос завершится sh, прежде чем вы сможете получить доступ к this.Skills, в противном случае данные еще не будут установлены.

Вам понадобятся async и await («современное» решение) :

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

или:

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