Как обновить данные на странице при обновлении данных в store?

Question

[hitakiri]

Принимаю данные из вебсокета в store:
store.js :

state: {
  socket: {
     isConnected: false,
      message: '',
      wsData: {},
      reconnectError: false,
   }
}
mutations: {
...
SOCKET_ONMESSAGE (state, message)  {
...    
      let d = JSON.parse(message.data);
      console.log(d); 
      state.socket.wsData = d;
...
}

main.app:

...
<template>
  <div>
    <p> {{ d.someData }} </p>
  </div>
</template>

...

methods: {
    sendCalculation() {
      this.$socket.send(dataToServer);
    },
}
...
computed: {
    d(){
      return this.$store.state.socket.wsData;
    }
  },
...

Пробовал this.$forceUpdate(); но эффекта ноль.

При получении данных в вебсокет данные в отладочном модуле vue обновляются, логи приходят. Но на странице данные не меняются. Как без перезагрузки страницы обновить данные?

Answer 1

[Алексей Ярков]

У вас в state нет свойства wsData

Comments

[hitakiri]

есть, $store.state.socket.wsData; с ошибкой пример написал, поправил...

[Алексей Ярков]

hitakiri, осталось теперь сделать как положено присваивание через мутацию, а не state.socket.wsData = d; и посмотреть что получится ))
Сейчас ошибок на эту тему в консоли нет?

[hitakiri]

Алексей Ярков, нет, консоль ошибки не выдаёт.

осталось теперь сделать как положено присваивание через мутацию, а не state.socket.wsData = d;

это как, если не секрет?

[Алексей Ярков]

hitakiri, как в документации написано

[hitakiri]

Вы имеете ввиду заменить
let d = JSON.parse(message.data);
на

let d;
Vue.set(d, JSON.parse(message.data));

?

[Алексей Ярков]

hitakiri, вы ссылку открывали? Что там написано? Как выглядит мутация vuex?

[hitakiri]

Алексей Ярков Вот что получилось:

store.js:
  state: {
    socket: {
      isConnected: false,
      message: {},
      reconnectError: false,
      }
    },
  mutations: {
    setDataD1(state, payload){
      state.socket.message = payload
    }
  },
  actions: {
    setDataD1({commit}, payload){
      commit('setDataD1', payload)
    }
  },
  getters: {
    getD1(state) {
      return state.socket.message;
    }
  }

app.vue:

<template>
  <div>
    <p> {{ d.someData }} </p>
  </div>
</template>
...
export default {
  created() {
    this.$options.sockets.onmessage = (data) => this.handleMassage(JSON.parse(data.data))
  },
computed: {
    d(){
      return this.$store.getters.getD1;
    }
  },
methods: {
    handleMassage(d){
      let payload = JSON.parse(d.data);
      switch (d.name) {
        case "initD1":
          this.setInitD1(payload);
          break
      }
    },
    setInitD1(payload){
      this.$store.dispatch('setDataD1', payload)
    }
  }
}

В vue-devtools при обновлении данные меняются, если выводить их в консоль тоже (хотя так и раньше было), данные на странице не обновляются ...

[Алексей Ярков]

hitakiri, а в vue-devtools геттер d меняется?

[hitakiri]

Алексей Ярков, да

[Алексей Ярков]

hitakiri, а если заменить <p> {{ d.someData }} </p> на <pre> {{ JSON.stringify(d) }} </pre>?
Что покажет?

[Алексей Ярков]

hitakiri, у вас там v-once случайно не стоит?

[hitakiri]

Алексей Ярков, старые данные. Это может быть из-за объёма обновляемых данных?, там ~35-40 Kb прилетает

[Алексей Ярков]

hitakiri, ну на этом наши полномочия всё )) В песочнице я бы поковырялся, но вы же не будете её делать.
Если кто-то подскажет - пните меня, тоже интересно.

[hitakiri]

Алексей Ярков, проблема решилась. Всё дело было в сложной структуре объекта который передавался в <template>

[Алексей Ярков]

hitakiri, то есть из-за множества ключей и глубины вложенности не рендерилось?

[hitakiri]

Алексей Ярков, да

[Алексей Ярков]

hitakiri, чудеса )) Не сталкивался с таким