Pinia w/ ve3:在模板中使用Actions返回的funcName不是函数



在ve3的模板中使用piia操作

Uncaught TypeError: $setup.[storeName]。[actionName]不是一个函数

是我做错了什么,还是预期的行为。似乎没有其他人有同样的问题。谷歌搜索没有发现任何东西

我正在使用新的组件

当我错误地试图用storeToRefs解构动作以及状态和getter时,在没有从Pinia文档中仔细阅读这一点后,我遇到了这个问题:

为了从存储中提取属性,同时保持其反应性,您需要使用storeToRefs()。它将为每个反应性属性创建refs。当您只使用来自存储的状态而不调用任何操作时,这很有用。注意,您可以直接从store中解构actions[强调添加]因为它们也绑定到商店本身。

给定这个模板-

<template>
<ul>
<li v-for="thing in things" :key="thing">{{ frob(thing) }}</li>
<li>
</template>

- and this store -

const useStore = defineStore("store", {
state: () => ({ things: ["1", "2", "3"], }),
actions: { frob(arg) { return `frobbed ${arg}`; } },
});
const store = useStore();

-如果你试图用storeToRefs解构thingsfrob,你会得到TypeError: $setup.frob is not a function。与状态和getter不同,action应该直接从store对象中解构:

// wrong
const { things, frob } = storeToRefs(store);
// right
const { things } = storeToRefs(store)
const { frob } = store

请注意,在Chrome浏览器中,错误将显示为Uncaught (in promise),而在Safari浏览器中,它将显示为Unhandled Promise Rejection

const users = defineStore('users', {
state,
getters,
actions,
})

有时对两个存储使用相同的名称会导致此问题。

最新更新