Full-Stack Vue.js 2 and Laravel 5

Moving the solution to a mixin
Let's generalize the solution for getting the right data to the home page so that
we can use it on the listing page as well. To do this, we'll move Axios and the
beforeRouteEnter hook from the HomePage component into a mixin that can then be
added to both page components: $ touch resources/assets/js/route-mixin.js
At the same time, let's improve the code by removing the repetition of the next
function call. To do this, we'll create a new method, getData, which will be
responsible for figuring out where to get the right data for the page and also for
getting it. Note that this method will be asynchronous since it may need to wait
for AJAX to resolve, so it will return a Promise rather than an actual value. This
Promise is then resolved within the navigation guard.
resources/assets/js/route-mixin.js: import axios from 'axios';
function getData(to) { return new Promise((resolve) => { let serverData =
JSON.parse(window.vuebnb_server_data); if (!serverData.path || to.path !==
serverData.path) { axios.get(`/api${to.path}`).then(({ data }) => { resolve(data);
}); } else { resolve(serverData); } }); }
export default { beforeRouteEnter: (to, from, next) => { getData(to).then((data)
=> { next(component => component.assignData(data)); }); } };
We don't need a polyfill for Promise as that is already supplied in
the Axios library.