Vue开发工具检测到Vuex状态突变-组件无法检测到更改

时间:2020-04-27 21:54:46

标签: vue.js state vuex

mutations: {
    //turns sets values to false/off based on area
    updateGroup(state, { newCodes, areaId}) {
        //area is the codes to change only 
       let area = state.details.find(el => el.id === areaId).markers
       let turnOn = {}
       let turnOff = {}
       for(let i = 0; i < area.length; i++) {
           if(newCodes.hasOwnProperty(area[i])) {
               turnOn[area[i]] = area[i]
           } else {
               turnOff[area[i]] = area[i]
           }
       }

       for(let i = 0; i < state.semaforos.length; i++) {
           if(state.semaforos[i].id == turnOn[state.semaforos[i].id]) {
            Vue.set(state.semaforos[i], 'kode', newCodes[state.semaforos[i].id])
           }
           if(state.semaforos[i].id == turnOff[state.semaforos[i].id])
           Vue.set(state.semaforos[i], 'kode', 'off')
       }







    }
}


methods: {
          update(payload) {
          this.$store.commit('updateGroup', payload)
      },
        },

在我称之为提交的组件中,我拉入状态

computed : {
      ...mapState({
        mapArea(state){
          return state.semaforos
        }
      })
    },

我现在设法从mapState获取响应值 现在的问题是在其他组件中无法做到这一点

在此先感谢您提供的任何帮助。祝你有美好的一天!。 编辑:这是要求的吸气剂

getters: {
    getChange: state => {
        return state.semaforos
    }
},

和状态定义注意:我将实际坐标替换为??。为了隐私=)

state: {
    semaforos: [
         { id : 'V2',   location: [??], kode : 'off'}, 
         { id : 'P2',   location: [??], kode : 'off'},
         { id : 'V3',   location: [??], kode : 'off'},                 
         { id : 'P3',   location: [??], kode : 'off'},
         { id : 'V4',   location: [??], kode : 'off'}, 
         { id : 'P4',   location: [??], kode : 'off'},
         { id : 'V5',   location: [??], kode : 'off'},        
         { id : 'P5',   location: [??], kode : 'off'},
         { id : 'V6',   location: [??], kode : 'off'}, 
         { id : 'P6',  location: [??], kode : 'off'},
         { id : 'V7',   location: [??], kode : 'off'}, 
         { id : 'P7',   location: [??], kode : 'off'},
         { id : 'V8',   location: [??], kode : 'off'}, 
         { id : 'P8',   location: [??], kode : 'off'},
         { id : 'V9',   location: [??], kode : 'off'}, 
         { id : 'P9',   location: [??], kode : 'off'},
         { id : 'V10',   location: [??], kode : 'off'}, 
         { id : 'P10',   location: [??], kode : 'off'},
         { id : 'V11',  location: [??], kode : 'off'}, 
         { id : 'P11',  location: [??], kode : 'off'},
         { id : 'V12',  location: [??], kode : 'off'}, 
         { id : 'P12',  location: [??], kode : 'off'},
         { id : 'V13',  location: [??], kode : 'off'}, 
         { id : 'P13',  location: [??], kode : 'off'},
         { id : 'V14',  location: [??], kode : 'off'}, 
         { id : 'P14',  location: [??], kode : 'off'},
         { id : 'V1',  location: [??], kode : 'off'}, 
         { id : 'P1',  location: [??], kode : 'off'},
    ]
},

1 个答案:

答案 0 :(得分:0)

该问题与mapState或vuex根本无关。由于我使用的是laravel-echo-server,因此问题在于我正在从linux命令行发送代码,并且仅在侦听特定通道时才能访问该数据(我只在一个组件mapState上侦听该通道是实际工作中...)。这就是我的其他组件无法访问该特定通道上的数据,因此无法接收更新的问题(或使用新数据提交更改,从而反映了商店中的更改)。谢谢大家的指点,尽管大家好!