Vue组件不更新状态更改答案

【问题标题】：Vue component not updating on state changeVue组件不更新状态更改
【发布时间】：2019-08-06 17:13:41
【问题描述】：

<div v-for="(photon, key) in $store.state.notConnected" v-bind:key="key">
    <div v-if="!photon.connected">
        <p>Photon is not Connected</p>
    </div>
    <div v-if="photon.connected">
        <p>Photon is Connected</p>
        <b-btn v-on:click="showNewSetup(photon)>Setup</b-btn>
    </div>
    <div v-if="photon.showSetup">Setup Page</div>
</div>

Store.js

export const store = new Vuex.store({
 state:{
   notConnected:{}
 },
 mutations:{
 setDevices(state,value){
 value.data.forEach(ele =>{
 state.notConnected[ele.id]={}
 state.notConnected[ele.id].showSetup=false
 state.notConnected[ele.id].connected=ele.connected
 }
 },
 SHOWNEWSETUP(state,value){
  state.notConnected[value.id].showSetup=true
}}
actions:{
async getDevices(context){
let devices = await axios.get('http:10.10.10.1:3000/api')
context.commit('setDevices',devices)
}
}
})

我正在改变我的 vuex 存储中的状态，但 v-if 没有反映更新后的状态。当我打开 vue 开发工具时，我看到发生了突变，并且可以看到状态已经改变，但是设置页面 div 没有更新。

注意：如果我转到不同的路线并返回到组件更新的页面

【问题讨论】：

你能显示更多代码吗？你的初始状态是什么样的？
您在 .notConnected 之后缺少双引号
@gugateider 这只是这个例子的一个错字
您不应该使用photon.id 作为密钥吗？
@JamesCoyle 我可以使用它，但这并没有什么不同，vue 只需要一种独特的方式来跟踪组件

标签： javascript vue.js vuex

【解决方案1】：

Vue 没有机会检测到数组的变化（除了 vue3 支持代理）。

这就是为什么您应该将您的突变更改为：

SHOWNEWSETUP(state,value){
  Vue.set(state.notConnected, value.id, {showSetup=true})
}

这样一来，Vue 的反应系统就会获悉变化，一切都应该按预期工作。

【讨论】：

这改变了状态，但组件仍然没有更新
所以我最终不得不删除该对象并重新创建它。 SHOWNEWSETUP(state,value){ delete state.notConnected[value.id] value.showSetup=true Vue.set(state.notConnected,value.id,value)}

【解决方案2】：

尝试在组件中使用计算属性，而不是直接指向状态：

<template>
    <div v-for="(photon, key) in photons v-bind:key="key">
        <div v-if="!photon.connected">
            <p>Photon is not Connected</p>
    </div>
    <div v-if="photon.connected">
        <p>Photon is Connected</p>
        <b-btn v-on:click="showNewSetup(photon)>Setup</b-btn>
    </div>
        <div v-if="photon.showSetup">Setup Page</div>
    </div>   
</template>

<script>
    computed: {
        photons() {
            return this.$store.state.notConnected
        },
    }
</script>

【讨论】：

那没用 :( 一切都还是一样