Javascript Vue组件在状态更改时未更新

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

---

注意：如果我转到不同的路径并返回页面，则组件更新将无法检测阵列中的更改（具有代理支持的vue3除外）

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

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

---

通过这种方式，Vue的反应系统可以了解更改，并且一切都应按预期工作。

Vue没有机会检测阵列中的更改（具有代理支持的vue3除外）

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

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

---

通过这种方式，Vue的反应性系统会被告知变化，一切都应按预期进行。

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

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

安装程序
设置页
计算：{
光子（）{
返回此。$store.state.notConnected
},
}

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

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

安装程序
设置页
计算：{
光子（）{
返回此。$store.state.notConnected
},
}

能否显示更多代码；你的初始状态是什么样的？之后你缺少了一个双引号。notConnected@gugateider这只是本例中的一个输入错误。您是否应该使用

photon.id

作为键？@JamesCoyle我可以使用它，但这没有什么区别，vue只需要一种独特的方式来跟踪组件扫描您显示的更多代码；你的初始状态是什么样的？之后你缺少了一个双引号。notConnected@gugateider这只是这个例子中的一个输入错误。你不应该使用

photon.id

作为键吗？@JamesCoyle我可以使用它，但这没有什么区别，vue只需要一种独特的方式来跟踪改变状态的组件，但是组件仍然没有更新，所以我不得不删除对象并重新创建它<代码>SHOWNEWSETUP（状态，值）{delete state.notConnected[value.id]value.showSetup=true Vue.set（state.notConnected，value.id，value）}更改了状态，但组件仍然没有更新，因此我不得不删除对象并重新创建它<代码>SHOWNEWSETUP（状态，值）{delete state.notConnected[value.id]value.showSetup=true Vue.set（state.notConnected，value.id，value）}不起作用的：（一切仍保持不变）不起作用的：（一切仍保持不变