Изменения состояния Vuex не распространяются на шаблон компонента Vue - PullRequest
Новая
       115

Изменения состояния Vuex не распространяются на шаблон компонента Vue

1 голос
/ 26 мая 2020

Я только начал работать над Vue и Vuex. Я создал компонент с данными о состоянии во Vuex. После действия я вижу, что мои изменения состояния применяются в мутации, однако мой Vue компонент по-прежнему не может принять новые изменения.

Вот мой файл магазина: 

const state = {
  roomInfo: {
    gameID: null,
    userID: null,
  },
  seats: null,
};

const getters = {
  seats: state => state.seats,
  roomInfo: state => state.roomInfo,
};

const actions = {
  async streamSeats({ commit }) {
    let connection = new WebSocket(`ws://localhost:8080/api/game/${state.roomInfo.gameID}/seats/${state.roomInfo.userID}`)

    connection.onmessage = function(event) {
      commit('setSeats', event.data);
    }

    connection.onopen = function() {
      console.log("Successfully connected to the echo websocket server...")
    }

    connection.onerror = function(event) {
      console.log("ERRR", event)
    }
  },
  async setRoomInfo({ commit }, roomInfo) {
    commit('setRoomInfo', roomInfo);
  },
};

const mutations = {
  setSeats: (state, seats) => {
    state.seats = seats
    // I can see changes here properly
    console.log(seats);
  },
  setRoomInfo: (state, roomInfo) => {
    state.roomInfo.gameID = roomInfo.gameID;
    state.roomInfo.userID = roomInfo.userID;
    if (roomInfo.seatNumber === 1) {
      state.seats.p1.id = roomInfo.userID;
    }
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

И это мой компонент: 

<template>
  {{ seats }}
</template>

<script>
  /* import API from '../api' */
  import { mapGetters, mapActions } from 'vuex';

  export default {
    name: "Seats",
    methods: {
      ...mapActions([
        'streamSeats',
        'setRoomInfo',
        ]),
    },
    computed: {
      ...mapGetters([
        'seats',
        'roomInfo',
        'setSeats',
      ]),
    },
    watch: {
      roomInfo: {
        handler(newValue) {
          if (newValue.userID && newValue.gameID) {
            this.streamSeats();
          }
        },
        deep: true,
      },
    },
    components: {},
    data: function() {
      return {
        alignment: 'center',
        justify: 'center',
      }
    },
    created() {
      let gameID = this.$route.params.id
      this.setRoomInfo({
        gameID: gameID,
        userID: this.$route.params.userID,
        seatNumber: 1,
      });
    },
  }
</script>

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

I долго безуспешно пытались понять это. Я безуспешно пытался использовать mapstate, data и несколько других уловок. Я пробовал все предлагаемые решения в аналогичных потоках stackoverflow. Я был бы очень признателен, если бы кто-нибудь дал мне несколько советов о том, как преодолеть это препятствие.

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Спасибо, что посмотрели на это. Я сегодня установил расширение Vuejs chrome. Видимо, это изменило способ отображения ошибок в консоли chrome dev. Я только что заметил, что где-то у меня было несколько неперехваченных ошибок, которые не позволяли коду правильно go проходить через эти части. После решения этих проблем я смог увидеть данные в своем компоненте.

1 голос
/ 26 мая 2020

Есть некоторое несоответствие, когда вы определяете геттеры и вызываете mapGetters

store 

const getters = {
  seatsd: state => state.seats,   // there is a typo in seats, you declared seatsd
  roomInfo: state => state.roomInfo,
};

компонент 

computed: {
  ...mapGetters([
    'seats',
    'roomInfo',
    'setSeats',  // this is not getters, this is mutations
  ]),
},
...