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 property来监视状态更改。示例：

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

Answer 2

如果需要操作和重用数据，也可以使用getter。Getters Vuex