Vuex状态有时是空的（undefined），特别是当我刷新页面时有时会起作用

Question

Vuex 状态有时是空的（未定义），尤其是当我刷新页面时。有时它会起作用。

动作：

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 操作正在执行异步请求。需要等待请求完成后才能访问this.Skills否则数据还没有设置好

您需要 async 和 await（"modern" 解决方案）：

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));
  });
}

Vuex状态有时是空的（undefined），特别是当我刷新页面时有时会起作用

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

store

vue.js

vue-component

vuex

vuejs2