為什么當我更改路由時組件不呈現？

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 以使其具有響應性。