0

我大约一个月学习Vue。这可能是一个愚蠢的问题，但我真的很困惑。

我正在创建一个具有五个状态和“组件是”的 cs livechat 应用程序。欢迎 -> 身份 -> 等待队列 -> 聊天 -> 结束。

用户进度存储在 Vuex 中。通过侦听当前活动组件触发的“下一个”事件来更改状态。

但是，当我创建三个不同的浏览器窗口（包括隐身）时，事情变得很奇怪。我已经打开了第一个实例，直到它处于等待状态。然后，我对其他两个实例做同样的事情。当我检查第一个时，它突然处于结束状态，第二个处于聊天状态。我试图检查它的历史，发现前两个 vue 实例监听另一个触发的下一个事件。我是这样想的，因为触发事件的时间间隔很宽。

我哪里错了？它在一个选项卡中运行良好。

附加信息：我已经尝试过开发和生产构建，但结果仍然相同。

应用程序.vue

<template>
  <div class="mx-auto pt-6" style="width: 480px; height: 550px">
    <transition name="component-fade" mode="out-in">
      <component
        :is="currentProgressComponent"
        @next="nextProgress"
        @home="home"
      ></component>
    </transition>
  </div>
</template>

store.js

import { createStore } from 'vuex'
import { sendMessage } from '../services/socket'

export default createStore({
  state: {
    identity: { name: '', email: '' },
    target: { name: '', email: '' },
    role: '',
    progress: {
      list: ["welcome", "identity", "wait", "box", "ended"],
      current: 'welcome'
    },
    chats: []
  },
  mutations: {
    SET_IDENTITY(state, data) {
      state.identity = data
    },
    SET_ROLE(state, data) {
      state.role = data
    },
    SET_PROGRESS(state, newProgressIndex) {
      state.progress.current = state.progress.list[newProgressIndex]
    }
  },
  actions: {
    ....,
    nextProgress(store) {
      const next = store.state.progress.list.indexOf(store.state.progress.current) + 1
      if (next === store.state.progress.list.length) {
        throw new Error('Invalid next progress state')
      }
      store.commit('SET_PROGRESS', next)
    },
    home(store) {
      store.commit('SET_PROGRESS', 0)
    }
  },
})

ChatWait.vue

export default {
  components: { LoadingSpinner, ExclamationCircleIcon },
  setup(props, { emit }) {
    const state = ref("registering");
    const queue = ref(-1);
    const errorMessage = ref("");
    const store = useStore();
    const next = ref(false);
    if (store.state.role === "customer") {
      queueUp();
    } else if (store.state.role === "admin") {
      setAdminAvailability();
    } else {
      throw new Error("Invalid role");
    }
    const queuedCallback = ({ error, message }) => {
      if (error) {
        state.value = "error";
        errorMessage.value = message;
      } else {
        if (store.state.role === "customer") {
          state.value = "queued";
          getQueueNumber();
        } else if (store.state.role === "admin") {
          state.value = "waiting";
        }
      }
    };
    const queueNumberCallback = (number) => {
      queue.value = number;
      if (number < 2 && number >= 0) {
        joinConversation();
      } else if (number > 10) {
        setTimeout(() => {
          getQueueNumber();
        }, 10000);
      } else if (number > 5) {
        setTimeout(() => {
          getQueueNumber();
        }, 5000);
      } else {
        setTimeout(() => {
          getQueueNumber();
        }, 1000);
      }
    };
    registerWaitingCallbacks(queuedCallback, queueNumberCallback);
    registerChatCallbacks(() => {
      next.value = true;
    }, store);
    watchEffect(() => {
      if (next.value) {
        console.log("I am from chat wait");
        emit("next");
      }
    });
    return {
      state,
      queue,
      errorMessage,
    };
  },
  computed: {
    ...
  },
};

注意：当组件更改时，它不会记录“我来自聊天等待”

4

0 回答 0