页面标题组件 - 无法让 Vuex 更新嵌套子组件上的存储

Question

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

我决定使用 Vuex 来存储页眉组件所需的数据，因为它是我可以从任何地方访问的集中数据。对于我的解决方案，我在组件的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>

商店/商店.js

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

Library.vue

<template>
<div>
<page-header />
<router-view></router-view>
</div>
</template> ....

library-feed.vue(到 Library.vue 的默认子路由，填充路由器视图(

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

Answer 1

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

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

它应该看起来像这样：

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

Answer 2

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

因此，我回去看了看，意识到我的 App.vue 中的主路由器视图周围有保持活动标签......

我在这里发现(如何在 vuejs 中使用 keep-alive？(使用像这样的 keepalive 标签：

<keep-alive>
<router-view></router-view>
</keep-alive>

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

所以删除标签解决了它！