如何在 Vue 中保持 props 数据持久化？答案

【问题标题】：How to keep props data persisted in Vue?如何在 Vue 中保持 props 数据持久化？
【发布时间】：2020-12-19 01:38:49
【问题描述】：

我有一个简化为 4 个 Vue 组件的应用程序：

教材选择
教科书视图
章节视图
教科书标题

在我的TextbookSelection 组件中，我进行了 API 调用以从我的数据库中检索所有可用的教科书。然后，我用数据填充前端并动态创建路由器链接，如果用户点击其中一个，它们会将用户带到下一个 vue 组件TextbookView。我传入了一个教科书数据对象作为包含有关这本教科书信息的道具，以便TextbookView 组件可以使用它来填充，而不是再次调用教科书数据。

在我的TextbookSelection.vue 中，这些router-links 被创建。

<router-link
    :to="{
      name: 'TextbookView',
      params: { textbook: textbook},
    }"

在我的TextbookView 中，我写了props: ["textbook"]。我还有一个TextbookHeader 组件，其中显示有关所选教科书的所有信息，因此我也将教科书数据作为道具传递给TextbookHeader 组件。我将它作为一个单独的 vue 组件，因为我希望标题在用户深入教科书时保持不变，例如ChapterView 组件。如您所见，如果用户深入阅读教科书，我将从我的第一个组件 (TextbookSelection) 接收到相同的教科书数据对象并将其传递给每个组件。

这适用于第一遍；用户可以选择教科书，它会在标题中显示所有正确的教科书信息。但是，当用户在浏览器中点击“返回”或刷新页面时，就会出现问题。突然，标题消失了，因为现在缺少道具数据（教科书数据对象）。

Error in render: "TypeError: Cannot read property 'id' of undefined"

found in

---> <TextbookHeaderView> at src/components/TextbookHeader.vue
       <ChapterView> at src/components/ChapterView.vue
         <App> at src/App.vue

我应该如何解决这个问题？我不知道我正在做的是否正确，但基本上我想要的是：

有一个标头 vue 组件
保留教科书数据（用户可以来回/刷新，并且标题仍然有正确的信息）
在创建标头组件时不必不断地拉入数据

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

我建议您使用 VueX 进行状态管理。您可以有一个操作，在创建主组件时从数据库中获取数据，然后根据获取的数据更新存储。这使您的所有组件都可以访问通过路由保留的数据。然后，您的 TextbookHeader 和所有其他组件具有单一的事实来源（存储），并且您不必重新获取数据（无论如何您都不应该这样做）。更多关于Vuex的信息，请访问the official documentation

【讨论】：