VueJS 和 Keep-Alive：为什么会出现控制台错误？

Question

I have a view/page called posts that I want to show with a list of posts. Let's assume that this page would contain thousands of posts. Thus, I only want to load it once, and if the user navigates to a different page of the app and then returns back to the posts page, I don't want to make an API call and load all the posts again.

I saw that Vue has something called <keep-alive> which can cache certain routes/components: https://v2.vuejs.org/v2/api/#keep-alive

Here's what I tried:

<keep-alive :include="posts">
    <RouterView :key="$route.name" class="pb-5"/>
</keep-alive>

Unfortunately, I can't figure out why it won't work for my demo. I get a console error like so:

[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

found in

---> <App> at /src/App.vue
       <Root>

Anyone have any tips on what I am doing wrong? Here's my codesandbox demo: https://codesandbox.io/s/v010-65o4r?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

Answer 1

You need to remove the : binding from include , otherwise it's looking for a data property called posts in your App component instead of the literal string "posts".

<keep-alive include="posts">
    <RouterView :key="$route.name" class="pb-5"/>
</keep-alive>

You also need to give your Posts component the name "posts", because the keep-alive include refers to a component name and your component doesn't have one:

export default {
  name: "posts",  // <-- Add this
  components: {
    PostsList
  }
};