VueJS: получение данных до и после загрузки компонента

Я новичок в VueJS, работаю над компонентом и хочу получить некоторые данные из API до загрузки соответствующего маршрута; только тогда компонент должен загрузиться. Как только компонент создан, мне нужно вызвать другой API, который принимает в качестве входных данных данные, полученные из первого API. Вот мой скрипт компонента:

export default {
  name: 'login',
  data () {
    return {
      categories: []
    }
  },
  created () {
     // it gives length = 0 but it should have been categories.length
      console.log(this.categories.length);

    // Call getImage method
    loginService.getImage(this.categories.length)
        .then(res => {
            console.log('Images fetched');
        })
  },
  beforeRouteEnter (to, from, next) {
    loginService.getCategories().then((res) => {
      next(vm => {
        vm.categories = res.data.categories;
      });
    }, (error) => {
      console.log('Error: ', error);
      next(error);
    })
  },
  methods: {}
}

Я пытался использовать хук mounted, но он не работает. Однако, если я watch свойство categories и вызываю метод выборки изображения, он работает. Я не думаю, что использование наблюдателей — лучший подход. есть идеи?


javascript vue.js vuejs2 vue-component
person Aosis    schedule 05.07.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Переместите вызов, чтобы получить дополнительную информацию, в метод и вызовите этот метод из next.

export default {
  name: 'login',
  data () {
    return {
      categories: []
    }
  },
  beforeRouteEnter (to, from, next) {
    loginService.getCategories().then((res) => {
      next(vm => {
        vm.categories = res.data.categories;
        vm.getMoreStuff()
      });
    }, (error) => {
      console.log('Error: ', error);
      next(error);
    })
  },
  methods: {
    getMoreStuff(){
      console.log(this.categories.length);

      // Call getImage method
      loginService.getImage(this.categories.length)
        .then(res => {
            console.log('Images fetched');
        })
    }
  }
}

В качестве альтернативы сделайте это в обратном вызове для getCategories.

loginService.getCategories()
  .then(res => {
    vm.categories = res.data.categories;
    loginService.getImage(vm.categories.length)
      .then(res => //handle images then call next())
  })
  .catch(err => //handle err)

Или, если вы используете предварительный компилятор, который обрабатывает async/await

async beforeRouteEnter(to, from, next){
  try{
    const categoryResponse = await loginService.getCategories()
    const categories = categoryResponse.data.categories
    const imageResponse= await loginService.getImage(categories.length)
    next(vm => {
      vm.categories = categories 
      vm.images = imageResponse.data.images
    })

  } catch(err){
    //handle err
  }
}
person Bert    schedule 05.07.2017
comment
Я ценю ваш ответ, но мне до сих пор не ясно, почему он не работает даже в хуке created. - person Aosis; 06.07.2017