Кажется, мне трудно обновить значение в компоненте из хранилища vuex, когда оно обновляется. Я рассмотрел этот вопрос (vue. js 2, как смотреть значения хранилища из vuex ) и последовал принятому ответу, но он не работает для меня. Вот мое объяснение.
Данные получены моим приложением, и в хранилище происходит мутация (я подтвердил, что это работает, используя vuejs devtools). Вот соответствующий код:
uibuilder.onChange('msg', function(newVal){
//console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
switch(newVal.topic) {
// Process new data from a sensor
default:
var parts = newVal.topic.split("/")
for (const [key, value] of Object.entries(newVal.payload)) {
if (!(key === "heater" || key === "battery")){
var device = { id: parts[2], name: parts[3] + '/' + parts[4], function: key, value: value }
this.$store.commit('rooms/UPDATE_VALUE', device)
}
}
это вызывает мутацию в магазине / комнатах. js module:
mutations = {
UPDATE_VALUE(state, payload){ // Updates the value of a device in room
let device = state.rooms.find(room => room.id === payload.id).devices
.find(device => device.name === payload.name && device.function === payload.function)
device.value = parseFloat(payload.value)
},
}
и, как я уже сказал, все это происходит. У меня есть компонент, который отображает значение устройства (на датчике, но я удалил его на данный момент и просто отображаю значение на странице для упрощения).
<template>
<b-card no-body class="bg-secondary text-light">
<b-card-body class="bg-secondary m-0 pt-0 pb-0">
<button @click="test">Test</button>
{{ deviceValue }}
</b-card-body>
</b-card>
</template>
<script>
module.exports = {
props: {
'gDevice': {type: Object},
'gRoom': {type: String},
},
data: function () {
return {
}
},
computed: {
deviceValue() {
return this.$store.getters['rooms/getDeviceValue'](this.gRoom, this.gDevice.name);
},
},
methods: {
test: function(event){
console.log(this.deviceValue)
}
},
created(){
console.log(this.deviceValue) // Check a value is being returned (it is)
},
mounted: function () {
},
watch: {
deviceValue (newval, oldval) {
console.log(newval)
},
}
}
</script>
Когда в app магазин определенно обновляется, но в моем компоненте ничего не происходит. Я добавил кнопку, чтобы проверить, меняется ли вычисленное значение - это не так! Думаю, это объясняет, почему не запускается событие часов. Я просто не понимаю, почему вычисленное значение не обновляется, хотя значение в магазине определенно изменилось. Надеюсь, кто-нибудь увидит мою ошибку.
Вот геттер в магазине:
getters = {
getDeviceValue: (state) => (roomname, devicename) => { // returns the value from a device in a room
return state.rooms.find(room => room.name === roomname).devices.find(dev => dev.name === devicename).value;
},
}
!! ОБНОВЛЕНИЕ !! Я только что обнаружил, что изменение значения не фиксируется. Если я воспользуюсь инструментами разработчика и нажму «Зафиксировать все», все обновится, как ожидалось. Но если я перезагружу приложение, мне придется сделать это снова. Понятия не имею, как это исправить ???
Спасибо, Мартин