Vue 3 Composition API using getters

Question

我正在使用组合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模块，将参数传递给服务等。现在，这是使用组合api重构的组件。我使用的是vex -composition-helper。需要注意的重要一点是，incomingChats来自websocket消息，因此是异步的。带有options 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.value时agentId处于时间死区。即使不是，它也是未定义的，因为它在初始化时引用了自己。

应该是:

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