使用getter的Vue 3合成API

我正在使用composition API重构我的一些组件。我遇到了一个异步状态的组件试图从它的一个getter获取数据的问题。

带有选项API的原始组件:

export default {
  computed: {
    ...mapGetters({
      incomingChats: "websocket/getIncomingChats",
      agentId: "token/getAgentId",
    }),
  },
  methods: {
    ...mapActions({
      addChatSession: "chatSession/addChatSession",
    }),
    assigningChatToAgent(chatId) {
      let agentId = JSON.parse(JSON.stringify(this.agentId));
      let assignChatObject = {
        aggregateId: chatId,
        agentId: agentId.agentId,
      };
      AssignChatService.assignChatToAgent(assignChatObject);
    },
  },
};

因为你在这里看不到什么花哨的东西。我正在使用带名称空间的vuex模块,将参数传递给服务等。现在这是使用composition api重构的组件。我正在使用vuex合成助手。需要注意的一点是,incomingChats来自websocket消息,因此是异步的。带有选项API的原始组件代码非常完美。

  setup() {
    const { incomingChats, agentId } = useGetters({
      incomingChats: "websocket/getIncomingChats",
      agentId: "token/getAgentId",
    });
    const { addChatSession } = useActions({
      addChatSession: "chatSession/addChatSession",
    });
    function assigningChatToAgent(chatId) {
      const agentId = JSON.parse(JSON.stringify(agentId.value));
      const assignChatObject = {
        aggregateId: chatId,
        agentId: agentId.agentId,
      };
      AssignChatService.assignChatToAgent(assignChatObject);
    }
    return {
      incomingChats,
      agentId,
      addChatSession,
      assigningChatToAgent,
    };
  },

这是组件模板:

<template>
  <ul class="overflow-y-auto pr-2">
    <BaseChat
      v-for="(chat, index) in incomingChats"
      :key="index"
      :chat="chat"
      :class="{ 'mt-0': index === 0, 'mt-4': index > 0 }"
      @click="assigningChatToAgent(chat.id, chat)"
    />
  </ul>
</template>

composition API的问题是,我遇到了以下错误:

未捕获引用错误:在初始化之前无法访问“agentId”

此处的错误指的是这一行:

const agentId = JSON.parse(JSON.stringify(agentId.value));

那是阿根蒂德。价值来自agentId getter,但我不明白我做错了什么。希望有人能帮忙。