页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储
Posted
技术标签:
【中文标题】页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储【英文标题】:Page header component - Can’t get Vuex to update store on nested child component 【发布时间】: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>
【问题讨论】:
【参考方案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() 之类的生命周期钩子不会重置。
所以去掉标签就解决了!
【讨论】:
以上是关于页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储的主要内容,如果未能解决你的问题,请参考以下文章
如何使用Angular 6在一个输入中将多个对象发送到嵌套子组件