避免每次页面加载时都获取图像 - vuejs

Question

我正在构建一个页面，用于动态显示 Instagram 等供稿中的一些照片。每次加载页面或进入照片的详细信息页面然后返回以向 Laravel 控制器发出 API 请求时，我都会尝试避免，这意味着获取数据和图像，丢失页面的位置和从页面顶部开始。

我的代码：

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 主要用于保存组件状态或避免重新渲染它。但我无法理解如何使用它。我在另一个 Home.vue 中调用我的 Feed.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 组件中更改什么？

Answer 1

mounted() 只能调用一次。

似乎有多种方法可以解决这个问题。

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 结合使用