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

Question

我有一个模板，并且有一个组件：

        <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 的新手。

Answer 1

使用方法，因为计算的属性是缓存的。 见下文：

   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>

Answer 2

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