为什么当我更改路由时组件不呈现？答案

【问题标题】：Why component doesn't render when I change the route?为什么当我更改路由时组件不呈现？
【发布时间】：2021-12-05 12:44:07
【问题描述】：

我有一个模板，还有一个组件：

        <super-visor
            v-if="!top10ModeActivated"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

如你所见，这个组件在top10ModeActivated只有false时渲染；

   computed: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

我将debugger 放在top10ModeActivated 上，它仅在组件第一次呈现时才有效。所以我看到我的组件，只有当我刷新页面而不是当我改变路由时。

谁能帮助我并描述我如何解决这个问题？因为我是 VueJS 的新手。

【问题讨论】：

标签： javascript vue.js components vue-router

【解决方案1】：

使用方法，因为computed properties are cached。见下文：

   methods: {
        top10ModeActivated() {
            return this.$store.state.moduleSearch.top10ModeActivated;
        },
   }

和

        <super-visor
            v-if="!top10ModeActivated()"
            v-for="cart in getCarts(index + 1)"
            :cart="cart"
            :key="cart.position"
        ></super-visor>

【讨论】：

我提出了你的建议，但我遇到了同样的问题。
我删除了条件，只有在重新加载页面时才能看到此模板。
一个属性是可能的“.top 10 Mode Activated”不是反应性的。你初始化了吗？ => ...状态：{moduleSearch：{top10ModeActivated：'...'}，...} ...
但即使我用这个道具删除了条件，它也不起作用。当我更改路线时，组件似乎永远不会呈现。只有当我重新加载页面时。

【解决方案2】：

直接从计算属性访问存储状态不会使其反应。改用吸气剂。创建一个返回 top10ModeActivated 的 Vuex getter，然后在计算属性中调用该 getter 以使其具有响应性。

【讨论】：