为什么axios请求的数据无法第一次拿到？

Question

问题描述

在本地搭建了一个easy-mock的服务，提供API模拟。然后学习使用axios和vuex做了一个响应式的网站，遇到一个问题，页面打开的第一次数据是无法取到，但是刷新一下页面数据就有了，然后点击导航进入其他栏目也有这样的现象。

问题出现的环境背景及自己尝试过哪些方法

/*
   Home.vue 网站首页
*/

<script>
export default {
  name: "Home",
  data() {
    return {
      articles: [],
    };
  },
  created() {
    this.$store.dispatch("loadHomeData");
  },
  mounted() {
    this.articles = this.$store.state.homeData;
  },
  activated() {
    //发起数据请求
    this.$store.dispatch("loadHomeData");
    this.articles = this.$store.state.homeData;
  },

};
</script>

/*
    store/index.js
*/
import Vue from "vue";
import Vuex from "vuex";
import { Request } from "@/request";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    homeData: [],
  },
  mutations: {
    loadHomeData(state, res) {
      state.homeData = res;
    },
  },
  actions: {
    loadHomeData(context) {
      Request("/loadHomeData")
        .then(res => {
          context.commit("loadHomeData", res.data.articles);
        })
        .catch(err => {
          console.log(err);
        });
    },
  }
});

/*
    Request/index.js
*/
import axios from "axios";

export function Request(config) {
  const instance = axios.create({
    method: "get",
    baseURL: "http://192.168.0.222:7300/mock/5ddb933eb7f02e2ea33aca08/api/",
    timeout: 3000
  });
  return instance(config);
}

在组件的created声明周期发起数据请求，
mounted周期里，将在state里面的数据再给到组件的data部分。
整个思路就是在页面created-dispath->actions->mutation->mouted(state->组件data)->组件渲染。
但是，问题是只有刷新过页面之后数据才会到组件的data.
应该如何修改?

Answer 1

vue初始化时执行的声明周期函数都是同步，你请求数据是一个异步任务(宏任务)，所以其实在mounted里获取到store里的homeData还是初始的值，因为同步脚本还没有执行完，axios请求回调函数还没有执行；换句话说就是homeData数据还没更新，所以mounted里赋的值还是旧值；然后问题中提到刷新页面后数据又正常了，我理解你这里指的刷新是重定向到其他路由，然后在返回home页面，数据出来是因为在上一次进入页面后数据确实加载了，但是由于异步的原因导致mounted里的赋值是无效的，但是当你再次进入home里，activated重新执行(你应该用了keep-alive)，而此时store的数据已经更新了，所以这一次赋值成功了

解决方案：
不需要声明data里的字段了，直接使用computed选项，如下

/*
   Home.vue 网站首页
*/

<script>
export default {
  name: "Home",
  data() {
    return {
    };
  },
  computed: {
    articles() {
        return this.$store.state.homeData;
    }
  }
  created() {
    this.$store.dispatch("loadHomeData");
  },
  activated() {
    //发起数据请求
    this.$store.dispatch("loadHomeData");
  },

};
</script>

Answer 2

把this.$store.state.homeData放在computed钩子里试试