页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储答案

【问题标题】：Page header component - Can’t get Vuex to update store on nested child component页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储
【发布时间】：2020-05-06 09:32:52
【问题描述】：

我有一个 Vue 应用程序，我在其中创建了一个页面标题组件，该组件被拉入高级视图组件（主页、图书馆、教室）。在每个“更高”级别的视图中，我都有一个路由器视图，其中嵌套的“子路由”组件被加载。我想更改页眉组件中的标题以匹配加载的任何组件。自然地，在做了一些研究之后，我发现我无法使用道具或插槽来获得我需要的功能。我知道我可以使用路由参数或查询来完成工作，但是我不希望这些额外的信息弄乱 url。

我决定使用 Vuex 来存储 Page Header 组件所需的数据，因为它是我可以从任何地方访问的集中数据。对于我的解决方案，我在组件的created() 挂钩上使用了一个称为突变的方法，以在其中一个页面加载时更新页面标题存储数据。但是，这在初始加载时效果很好，但只会触发一次 (created())。如果我导航回一个页面，标题不会更新。

为了完成这项工作，我需要观察“$route”的变化吗？任何帮助，将不胜感激。我不知道如何在路线更改时重新提交突变。

代码如下：

page-header.vue

    <template>
        <div class="page-header">

           <h2>{{ getPageTitle }}</h2>

        </div>
    </template>

    <script>

        export default {
            name: 'pageHeader',
            computed: {
                getPageTitle(){
                    return this.$store.state.pageTitle;
                }
            }
        }

    </script>

store/store.js

    export const store = new Vuex.Store ({
        state: {
            pageTitle: '',
        },
        mutations: {
            setPageTitle(state, payload) {
                state.pageTitle = payload.pageTitle;
            }
        }

    });

库.vue

    <template>

      <div>

        <page-header />

          <router-view></router-view>

      </div>

    </template> ....

library-feed.vue（到 Library.vue 的默认子路由，填充 router-view ）

    <template>
    ...
    </template>

    <script>

        export default {
        name: 'libraryFeed',
        created() {
            this.$store.commit('setPageTitle', {pageTitle: 'Library'})
        },
    }

    </script>

【问题讨论】：

标签： vue.js vue-component vuex vue-router

【解决方案1】：

我在这里重新创建了您的示例：https://codesandbox.io/s/page-title-from-store-bhw4h

您使用 created() 钩子的方法在代码沙盒上对我有用。你能提供你的路线配置吗？

它应该看起来像这样：

const routes = [
  { path: "/child", component: Child },
  { path: "/child2", component: Child2 }
];

【讨论】：

谢谢，你的工作很有趣。我提供了我的路线配置，你能检查一下是不是这样吗？

【解决方案2】：

感谢@moritzgvt。我看到它在您的演示中运行良好。我怀疑它可能是嵌套的子路由，但我编辑了你的代码框，这也有效。

因此，我回去查看并意识到我的 App.vue 中的 main router-view 周围有 keep-alive 标签 ....

我在这里 (How to use keep-alive in vuejs?) 发现使用这样的保持活动标签：

    <keep-alive>

       <router-view></router-view>

    </keep-alive>

它是否将路由器视图保留在内存中，并且状态以及诸如 created() 和mounted() 之类的生命周期钩子不会重置。

所以去掉标签就解决了！

【讨论】：