页眉组件 - 无法让 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 中的 ma​​in router-view 周围有 keep-alive 标签 ....

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

    <keep-alive>

       <router-view></router-view>

    </keep-alive>

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

所以去掉标签就解决了!

【讨论】:

以上是关于页眉组件 - 无法让 Vuex 更新嵌套子组件上的存储的主要内容,如果未能解决你的问题,请参考以下文章

如何从父组件中递归嵌套子组件

获取非永久嵌套子组件的元素

如何使用Angular 6在一个输入中将多个对象发送到嵌套子组件

如何在挂载期间获取嵌套子组件中的 div - Vue.js

嵌套子菜单的 AngularJs 本机幻灯片切换无法正确更新高度

使用refs reactJS WithStyles调用嵌套子方法[重复]