javascript - Vue.js 状态更新但 View 不重新渲染

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 中的更改使用react。您需要使用 computed property观察状态变化。示例:

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