Vuex 状态中的重复数组项（使用 Socket.io）

Question

所以我在 Vue 中构建了这个应用程序并使用了 Vuex。我使用 Socket.Io 连接到 Node/Express 后端，以便能够在需要时立即将数据从服务器推送到客户端。

推送给客户端的数据是以对象的形式存储在VUEX中的数组中。推入数组的每个数据对象都附加了一个唯一的字符串。

该字符串用于比较VUEX中已经压入数组的对象。如果有重复，它们将不会被存储。如果不相等 = 它们被存储。

然后我使用 ...mapGetters 在 Vuex 中获取数组并循环遍历它。为每个对象渲染一个组件。

但是 - 有时同一个对象会被渲染两次，即使 VUEX 中的数组显然只显示一个副本。

这是 VUEX 商店中的代码：

export default new Vuex.Store({
  state: {
    insiderTrades: [],
  },

  mutations: {
    ADD_INSIDER_TRADE(state, insiderObject) {
      if (state.insiderTrades.length === 0) {
        // push object into array
        state.insiderTrades.unshift(insiderObject);
      } else {
        state.insiderTrades.forEach((trade) => {
          // check if the insider trade is in the store
          if (trade.isin === insiderObject.isin) {
            // return if it already exists
            return;
          } else {
            // push object into array
            state.insiderTrades.unshift(insiderObject);
          }
        });
      }
    },
  },
  getters: {
    insiderTrades(state) {
      return state.insiderTrades;
    },
  },

这是App.vue

中的一些代码

mounted() {
  // //establish connection to server
  this.$socket.on('connect', () => {
    this.connectedState = 'ansluten';
    this.connectedStateColor = 'green';
    console.log('Connected to server');
  });
  //if disconnected swap to "disconneted state"
  this.$socket.on('disconnect', () => {
    this.connectedState = 'ej ansluten';
    this.connectedStateColor = 'red';
    console.log('Disconnected to server');
  });
  // recieve an insider trade and add to store
  this.$socket.on('insiderTrade', (insiderObject) => {
    this.$store.commit('ADD_INSIDER_TRADE', insiderObject);
  });
},

Answer 1

您的 forEach 迭代现有项目并为每个现有项目添加一次新项目。使用 Array.find:

ADD_INSIDER_TRADE(state, insiderObject) {
  const exists = state.insiderTrades.find(trade => trade.isin === insiderObject.isin);
  if (!exists) state.insiderTrades.unshift(insiderObject);
},

您不需要初始 length 检查

Vuex 状态中的重复数组项（使用 Socket.io）

Duplicate array items in Vuex state (using Socket.io)

javascript

arrays

socket.io

vue.js

vuex