Pinia w/ Vue3:在模板中使用操作返回funcName不是一个函数

Question

在Vue3中使用模板内的Pinia操作

Uncaught：$setup.storeName.actionName不是函数

我是做错了什么事还是被期望的行为。似乎没有其他人有同样的问题。谷歌搜索没有透露任何信息。

我正在使用新的组件

Answer 1

当我错误地尝试用storeToRefs分解操作以及状态和getter时，我遇到了这种情况，在没有仔细阅读半夏医生的这一点之后：

为了在保持其反应性的同时从存储中提取属性，您需要使用storeToRefs()。它将为每个反应性属性创建参考文献。当您只使用存储区的状态，而不调用任何操作时，这是非常有用的。注意，您可以直接从商店添加的命令中分解操作，因为它们也绑定到商店本身。

所以考虑到这个模板-

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

-还有这家商店-

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

-如果你试图用things和frob同时用storeToRefs来分解，你就会得到TypeError: $setup.frob is not a function。与状态和getter不同的是，应该直接从存储对象中解构操作：

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

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

请注意，在Chrome中，错误将显示为Uncaught (in promise)，而在Safari中，错误将显示为Unhandled Promise Rejection。