javascript - Vue 组件未在状态更改时更新

Question

<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>    

商店.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 不反射(reflect)更新后的状态。当我打开 vue 开发工具时，我看到发生了突变，并且可以看到状态已更改，但设置页面 div 没有更新。

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

Answer 1

Vue 没有机会检测数组中的更改(除了具有代理支持的 vue3)。

这就是为什么你应该将突变更改为:

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

这样，Vue 的 react 系统就会收到有关更改的通知，并且一切都应该按预期工作。