VueJS：コンポーネントをロードする前後のデータを取得する

Question

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プロパティと呼び出しフェッチイメージメソッドを使用すると動作します。私はウォッチャーを使うのが最善のアプローチだとは思わない。何かご意見は？

Answer 1

メソッドに追加情報を取得するために呼び出しを移動し、そのメソッドを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) 

それとも、非同期/の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 
    } 
}