vuex状态有时是空的（未定义），特别是当我刷新页面时，有时它会起作用

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,

mutation：

      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（“现代”解决方案：]

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