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中的更改做出反应。您需要使用commit 4ce7218来监视状态更改。例如：

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

Answer 2

如果您需要操纵数据并重复使用，也可以使用getter。 Getters Vuex

Vue.js状态更新，但View不会重新渲染

2 个答案: