Избегайте загрузки изображений каждый раз при загрузке страницы - vuejs - PullRequest
Новая
       8

Избегайте загрузки изображений каждый раз при загрузке страницы - vuejs

0 голосов
/ 03 февраля 2019

Я создаю страницу, на которой динамически отображаются некоторые фотографии в ленте, например в Instagram.Я застреваю, пытаясь избежать каждый раз, когда я загружаю страницу или захожу на страницу с подробностями фотографии, а затем возвращаюсь назад, чтобы выполнить запрос API к контроллеру Laravel, что означает выборку данных и изображений, потерю позиции страницы иначиная с верхней части страницы.

Мой код:

Feed.vue 

<template>
<div v-for="(image, index) in images" :key="index">
   <v-img :src="image.path" class="image-masonry mini-cover" slot-scope="{ hover }"></v-img>
</div>
</template>

<script>
export default {
    data() {
    return {
      images: []
    }
  },
  mounted() {
    this.getImagesHome();
  },
  methods: {
    getImagesHome() {
      this.axios.get('/api/images', {},
        ).then(response => {
          this.images = response.data;
        }).catch(error => {
          console.log(error);
      });
    },
  }
}
</script>

Редактировать:

Я видел, что keep-aliveв основном используется для сохранения состояния компонента или предотвращения его повторного рендеринга.Но я не могу понять, как его использовать.Я вызываю свой компонент Feed.vue в другом Home.vue, как показано ниже: 

<template>
  <v-app>
    <Toolbar @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></Toolbar>
    <Navbar ref="drawer"></Navbar>
    <keep-alive>
      <Feed></Feed>
    </keep-alive>
  </v-app>
</template>

<script>
  import store from '../store';

  export default {
    components: {
      'Toolbar' : () => import('./template/Toolbar.vue'),
      'Navbar' : () => import('./template/Navbar.vue'),
      'Feed'   : () => import('./Feed.vue')
    }
  }
</script>

Что мне нужно добавить в keep-alive и что я должен изменить в своем компоненте Feed.vue?

1 Ответ

0 голосов
/ 04 февраля 2019

mount () следует вызывать только один раз.

Похоже, есть несколько способов сделать это.

1) Если вы используете vue-router, посмотрите наscrollBehaviour

https://router.vuejs.org/guide/advanced/scroll-behavior.html

Из их документации 

  const router = new VueRouter({
    routes: [...],
    scrollBehavior (to, from, savedPosition) {
      // return desired position
    }
  })

Вы также можете попробовать использовать keep-alive: https://vuejs.org/v2/api/#keep-alive

Он сохраняет компонент в памяти, поэтому он не уничтожается, вы получаете события activated и deactivated для проверки, когда он появляется.

Но я не думаю, что он сохраняет позицию прокрутки, поэтомуВы можете использовать это в сочетании с scrollBehaviour

...