VueJS и Keep-Alive: почему ошибка консоли? - PullRequest
Новая
       17

VueJS и Keep-Alive: почему ошибка консоли?

1 голос
/ 05 марта 2020

У меня есть вид / страница с именем posts, которую я хочу показать со списком сообщений. Давайте предположим, что эта страница будет содержать тысячи сообщений. Таким образом, я хочу загрузить его только один раз, и если пользователь переходит на другую страницу приложения и затем возвращается на страницу posts, я не хочу делать вызов API и загружать все сообщения снова.

Я видел, что Vue имеет нечто, называемое <keep-alive>, которое может кэшировать определенные маршруты / компоненты: https://vuejs.org/v2/api/#keep -alive

Вот что я попробовал: 

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

К сожалению, я не могу понять, почему это не сработает для моей демонстрации. Я получаю консольную ошибку, например, так:

[Vue warn]: свойство или метод "posts" не определены в экземпляре, но на них ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring -Reactive-Properties . 

found in

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

У кого-нибудь есть какие-либо советы о том, что я делаю неправильно? Вот мои демо коды и коробки: https://codesandbox.io/s/v010-65o4r?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

1 Ответ

0 голосов
/ 05 марта 2020

Вам необходимо удалить привязку : из include, иначе он ищет свойство данных posts в вашем App компоненте вместо буквальной строки "posts". 

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

Вам также нужно дать вашему Posts компоненту имя "posts", потому что keep-alive include относится к имени компонента, а у вашего компонента его нет: 

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