Question

我刚刚开始研究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服务器之后，我想更改状态内座位的状态数据。

我花了很长时间试图解决这个问题，但没有运气。我尝试使用mapstate，数据和其他一些技巧，但没有任何运气。我也在类似的stackoverflow线程中尝试了所有建议的解决方案。如果有人能给我一些如何克服这一障碍的提示，我将不胜感激。

Answer 1

定义 getters 并调用 mapGetters

时会出现一些不匹配的情况

商店

curl -o prebid2.44.7.js -X POST -d "modules%5B%5D=33acrossBidAdapter&modules%5B%5D=adgenerationBidAdapter&modules%5B%5D=ajaBidAdapter&modules%5B%5D=aolBidAdapter&modules%5B%5D=appnexusBidAdapter&modules%5B%5D=audienceNetworkBidAdapter&modules%5B%5D=criteoBidAdapter&modules%5B%5D=logicadBidAdapter&modules%5B%5D=microadBidAdapter&modules%5B%5D=aolBidAdapter&modules%5B%5D=aolBidAdapter&modules%5B%5D=open8BidAdapter&modules%5B%5D=openxBidAdapter&modules%5B%5D=openxoutstreamBidAdapter&modules%5B%5D=pubmaticBidAdapter&modules%5B%5D=rtbhouseBidAdapter&modules%5B%5D=rubiconBidAdapter&modules%5B%5D=yieldoneBidAdapter&modules%5B%5D=currency&modules%5B%5D=dfpAdServerVideo&modules%5B%5D=yieldoneAnalyticsAdapter&version=2.44.7" https://js-download.prebid.org/download

组件

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

Answer 2

感谢您的关注。我今天安装了Vuejs chrome扩展程序。显然，它改变了在Chrome开发者控制台中显示错误的方式。我只是注意到我在其他地方有一些未捕获的错误，这些错误使代码无法正确通过这些部分。解决了这些问题后，我可以在组件中看到数据。

Vuex状态更改不会传播到Vue组件模板

2 个答案: