Vue 3 Composition API 使用吸气剂

Question

我正在使用组合 API 重构我的一些组件。我遇到了一个具有异步状态的组件试图从其中一个 getters.

获取数据的问题

带有选项 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 模块，将参数传递给服务等。现在这是使用组合 api 的重构组件。我正在使用 vuex-composition-helper。需要注意的一件重要事情是 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>

组合 API 发生的事情是我收到此错误：

Uncaught ReferenceError: Cannot access 'agentId' before initialization

这里的错误是指这一行：

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

agentId.value 来自 agentId getter，但我不明白我在这里做错了什么。希望有人能帮忙。

Answer 1

来自外部作用域的变量被隐藏，agentId 在访问 agentId.value 时在 temporal dead zone 中。即使不是，它也将是未定义的，因为它在初始化时引用了自己。

应该是：

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

Vue 3 Composition API 使用吸气剂

Vue 3 Composition API using getters

javascript

vue.js

vuex

vue-composition-api