更改Vue数据对象

Question

更新的代码

<template>
     <swiper-slide v-for="(photon,key) in $store.state.photons" :key='key'>
            <radial-gauge :value='photon.tempF'  
                 :options="photon.GaugeOptions.optionsLastTempF"></radial-gauge>
     </swiper-slide>
</template>

store.js

export const store = new Vuex.Store({
  state: {
    photons: {},
    token: '',
  },
  mutations: {
    setUser(state, value) {
      value.data.forEach(element => {
        state.photons[element.id].user = element.data    
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[0].to=parseInt(element.data.tempAlert,10) 
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[1].from=parseInt(element.data.tempAlert,10)+1 
      });
    }},
actions: {
 async getData(context) {
      let db = []
      let photon = {}
      db = await axios.get('http://13.14.13.1:3300/DB')
      db.data.forEach(item => {
        if ([Object.keys(item)[0]] in photon) {
          let dataString = (Object.values(item)[0]).split(',')
photon[Object.keys(item)[0]].GaugeOptions={}
          photon[Object.keys(item)[0]].GaugeOptions.optionsLastTempF={
            title: 'Last Temp',
            units: "°F",
            minorTicks: 10,
            majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160'],
            maxValue: 160,
            highlights: [{
                    "from": 0,
                    "to": 0,
                    "color": "rgba(0,255,0)"
                },
                {
                    "from":0,
                    "to": 160,
                    "color": "rgba(255,0,0)"
                },

            ],
            colorPlate: '#222',
            colorUnits: '#ccc',
            colorTitle: '#eee',
            colorNumbers: '#eee',
            width: 200,
            height: 200
          }
 context.commit('setData', photon)
    }
}
}

如果我从主页转到这些仪表所在的图表页面，但如果我刷新页面，仪表具有正确的值，但它们没有正确更新，则此代码目前可以正常工作。

更新，以便在向我的组件添加v-if之后，它现在可以正确地加载所有内容。如果我在我的vuex存储中进行突变，我将如何引用我的组件来调用更新？

Answer 1

因此，通常情况下，Vuejs不会监视嵌套对象。我建议你修改一下你的代码来避免这种情况。这应该会有帮助：Vue.js - How to properly watch for nested data

此外，看起来您正在尝试引用Vuex Store对象，但是您使用的是data方法而不是computed方法，因此您不会获得有关该对象的更新。