创建的钩子不等待 beforeEach 动作承诺解决答案

【问题标题】：created hook not waiting for beforeEach action promise to resolve创建的钩子不等待 beforeEach 动作承诺解决
【发布时间】：2019-10-31 14:05:28
【问题描述】：

我有一个beforeEach 路由守卫，它调用fetchWorkspaces 操作。此操作向 Axios 执行请求，其响应填充状态。

但是，当从组件中的 created 挂钩调用状态并刷新页面时，我不会在控制台中获取值，而是在观察者中获取值。

created() {
  console.log(this.workspace)   # returns {__ob__: Observer}
}

该操作正在返回一个承诺，但 created 挂钩并未等待该承诺解决。

这是来自路由器的钩子：

router.beforeEach((to, from, next) => {
    store.dispatch('fetchWorkspaces').then(() => {
        next()
    })
}

这是动作及其突变：

export default {
  state: {
    workspaces: []
  },

  mutations: {
    SET_WORKSPACES(state, workspaces) {
      state.workspaces = workspaces.workspaces
    }
  },

  actions: {
    fetchWorkspaces({ commit }) {
      return Vue.axios.get('/workspaces').then(response => {
        commit('SET_WORKSPACES', response.data)
      })
    } 
  }

created 在 beforeEach 钩子之后调用。我不明白为什么会发生这种行为以及如何解决它。

我想从created 获取新状态数据的原因是调用其他将基于此状态数据获取资源的操作。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

见this 和that。我认为 Vue 是在您的路由器注册 beforeEach 之前首先创建的。因此，您应该在启动 Vue 实例之前使用beforeEach。

【讨论】：

我之前试过了，还是不行。结果相同。声明一个承诺应该是多余的，因为从我在其他地方读到的内容，Axios 已经返回了一个承诺。
只有刷新页面时才会出现？正常导航的时候可以吗？
是的，没错。页面重新加载后，我可以在应用程序中的不同页面来回切换，我看到它在控制台中正常显示状态。但这是有道理的，因为承诺已经异步解决，并且在我单击链接时可用。问题是为什么刷新页面时没有解决。
我认为您链接的答案是指不同的问题。我可以访问路由器中的状态。我在组件中无权访问的是路由中 beforeEach 钩子中定义的承诺的结果。