созданный хук не ждет до того, как каждое действие обещает решить

Question

У меня есть 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, заключается в том, чтобы вызывать другие действия, которые будут извлекать ресурсы на основе этих данных состояния.

Answer 1

См. это и то . Я думаю, что Vue создается первым, прежде чем ваш маршрутизатор зарегистрируется beforeEach. Итак, вы должны использовать beforeEach перед тем, как инициировать экземпляр Vue.