За последние 24 часа нас посетили 20699 программистов и 1130 роботов. Сейчас ищут 506 программистов ...

vue.js Данные до загрузки страницы.

Тема в разделе "JavaScript и AJAX", создана пользователем Artur_hopf, 26 сен 2019.

  1. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Добрый день. В данный момент получаю данные от сервера после загрузки страницы таким образом:
    Код (Javascript):
    1. export default
    2. {
    3.     data: function(){
    4.         return {
    5.             array: []
    6.         }
    7.     },
    8.     methods:{
    9.         getData: function (){
    10.             axios.get("index.php?r=vue-post/test").then((response) => {
    11.                 this.array = response.data;
    12.                 console.log(this.array);
    13.             });
    14.         }
    15.     },
    16.     mounted(){
    17.         this.getData();
    18.     }
    19. }
    Хотел научится получать данные до загрузки страницы, нашел такую инструкцию:
    https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation
    там есть такие строки
    Код (Javascript):
    1. beforeRouteEnter (to, from, next) {
    2.     getPost(to.params.id, (err, post) => {
    3.       next(vm => vm.setData(err, post))
    4.     })
    5.   }
    Решил прикрутить по этой инструкции:
    https://medium.com/@allenhwkim/resolving-before-route-vuejs-d319b27576c3

    но не получилось
    Код (Javascript):
    1. export default
    2. {
    3.     data: function(){
    4.         return {
    5.             array: [],
    6.             posts: []
    7.         }
    8.     },
    9.     beforeRouteEnter (to, from, next) {
    10.       axios.get('index.php?r=vue-post/test')
    11.         .then(response => {
    12.           next(vm => (vm.posts = response.data) )
    13.         })
    14.     },
    15.     methods:{
    16.         getData: function (){
    17.             axios.get("index.php?r=vue-post/test").then((response) => {
    18.                 this.array = response.data;
    19.                 console.log(this.array);
    20.             });
    21.         }
    22.     },
    23.     mounted(){
    24.         this.getData();
    25.         console.log(this.posts);
    26.     }
    27. }
    подскажите что не так делаю?
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
    Эта штука работает в роуте, в принципе логично:
    Код (Javascript):
    1. let routes = [
    2.     {
    3.         path: '/',
    4.         component: LandingPage,
    5.         name: 'landing',
    6.         beforeEnter: (to, from, next) => {
    7.             axios.get("index.php?r=vue-post/test")
    8.             .then((response) => {
    9.                 console.log(response);
    10.                 next(vm => (vm.posts = response.data) )
    11.             });
    12.         },
    13.     }
    14. ];
    как теперь получить доступ к vm.posts на загруженной странице?
     
  3. Roman __construct

    Roman __construct Активный пользователь

    С нами с:
    27 апр 2019
    Сообщения:
    1.270
    Симпатии:
    112
    Я конечно не эксперт по Vue, но яб не стал пихать логику в роут в принципе.

    Если нужны какие-то данные до создания страницы - помести метод для их получения в хук mounted, например

    Я бы так сделал

    Иначе мешанина получается
     
  4. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.266
    Симпатии:
    405
  5. villiwalla

    villiwalla Активный пользователь

    С нами с:
    14 дек 2016
    Сообщения:
    471
    Симпатии:
    70
    В понимании ДО загрузки страницы это значит что данные уже есть на клиенте.

    А вот извлечь данные ДО рендеринга страницы, соответсвенно ДО монтирования приложения перед его рендеринга то что нужно, а значит нужно что? Читать документацию с начала а не середины, поскольку без знания цикла жизни приложения на vue так и будешь долбить его методом не научного тыка.
    [​IMG]
    Смотрим и видим есть beforeCreate вот тут то и можно инициализировать извлечение данных то рендеринга страницы.
    https://vuejs.org/v2/guide/instance.html