Vue-Router Data Fetch: выборка данных перед загрузкой компонента beforeRouteUpdate - PullRequest
Новая
       35

Vue-Router Data Fetch: выборка данных перед загрузкой компонента beforeRouteUpdate

0 голосов
/ 29 августа 2018

Я новичок в навигационных средствах защиты Vue-Router, и недавно я понял, что мне нужно использовать beforeRouteUpdate для повторно используемых компонентов, например: Переход от /foo/1 к /foo/2

Однако, когда я пришел к /foo/1, я извлек данные из базы данных через вызов axios, и прежде чем перейти к /foo/2, мне нужно снова получить новые данные через вызов axios.

Здесь я сталкиваюсь с проблемой, когда средство навигации beforeRouteUpdate загружает компонент /foo/2 до того, как мои данные загружаются из вызова axios, и, таким образом, я получаю нулевое значение в некоторых из моих переменных.

Как я могу заставить beforeRouteUpdate ждать загрузки следующего компонента, чтобы все мои данные загружались из вызовов axios?

Что касается моего кода, он выглядит так: 

beforeRouteUpdate (to, from, next) {
    Vue.set(this.$store.state.user, 'get_user', null)
    this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(resp => {
      console.log(resp);
      if(this.$store.getters.is_user_loaded) {

        next()

      } else {

        this.$store.watch((state, getters) => getters.is_user_loaded, () => 
        {
          if(this.$store.getters.is_user_loaded) {
            console.log(this.$store.state.user.get_user);
            console.log('comes here');
            next()
          }
        })
      }
    })
},

Чтобы объяснить мой код дальше, я вызвал этот метод в своем компоненте, и поэтому я, когда я перехожу с /user/1 на /user/2, отправляю действие Vuex, которое делает вызов axios, чтобы получить детали нового профиля, но до того, как Вызов axios завершает работу и загружает данные в состоянии Vuex, beforeRouteUpdate уже загружает следующий компонент.

1 Ответ

0 голосов
/ 29 августа 2018

Во-первых, ваше действие должно выполнить любую мутацию состояния, такую ​​как установка user.get_user в null. Я также не уверен, почему вы добавили часы ; Ваше действие должно быть разрешено только после завершения. Например 

actions: {
  [OTHER_PROFILE_GET] ({ commit }, id) {
    commit('clearUserGetUser') // sets state.user.get_user to null or something
    return axios.get(`/some/other/profile/${encodeURIComponent(id)}`).then(res => {
      commit('setSomeStateData', res.data) // mutate whatever needs to be set
    })
  }
}

тогда у вашего охранника маршрута должно быть что-то вроде 

beforeRouteUpdate (to, from, next) {
  this.$store.dispatch(OTHER_PROFILE_GET, to.params.id).then(next)
}

Чтобы избежать ошибок при попытке отобразить данные null, используйте свои методы получения. Например, скажем, ваш получатель 

getters: {
  is_user_loaded (state) {
    return !!state.user.get_user
  }
}

в вашем компоненте, вы можете сопоставить это с вычисляемым свойством ... 

computed: {
  isUserLoaded () {
    return this.$store.getters.is_user_loaded // or use the mapGetters helper
  },
  user () {
    return this.$store.state.user.get_user // or use the mapState helper
  }
}

затем в вашем шаблоне используйте эту логику для условного рендеринга некоторых данных 

<div v-if="isUserLoaded">
  Hello {{user}}
</div>
<div v-else>
  Loading...
</div>

Это рекомендуемый подход в руководстве vue-router для beforeRouteUpdate

...