Vue.js 狀態更新但視圖不會重新渲染

Question

我很喜歡學習 Vue.js，但是我經常遇到這樣的問題，即當我根據狀態設置數據屬性時，如果狀態發生變化，它不會更新組件。

例如...

以下是片段

<router-link v-if="!isDisabled" :to="{ path: '/effects' }">
   <button class="stepButton" :class="{ disabled: false }">Next</button>
</router-link>

<button v-else class="stepButton" :class="{ disabled: isDisabled }">Next</button>


data: function(){
            return {
                ailmentsLib: [
                    "Chronic Pain",
                    "Migraines",
                    "Muscle Spasms",
                    "Stress",
                    "Vertigo",
                    "Nausea"
                ],
                search: '',
                searchMatch: true,
                ailments: [
                    "Chronic Pain",
                    "Migraines",
                    "Muscle Spasms",
                    "Stress",
                    "Vertigo",
                    "Nausea"
                ],
                isDisabled: this.$store.state.ailment.length < 1 ? true : false
            }   
        }

我的 vue 檢查器中的狀態正在更改，但按鈕未啟用。

Answer 1

問題是data()不會對store中的更改做出反應。 您需要使用計算屬性來觀察狀態變化。 例子：

computed: {
    isDisabled: function ()  {
        return this.$store.state.ailment.length < 1
    }
}

Answer 2

如果您需要操作數據並重用它，您也可以使用 getter。 吸氣劑 Vuex