CODEWITHSUNDEEP
vuejs3pinia
syldman
syldman

Reputation: 755

Pinia w/ Vue3: Using Actions in template returns funcName is not a function

Using a Pinia action from within the template in Vue3 gives

Uncaught TypeError: $setup.[storeName].[actionName] is not a function

Am I doing something wrong or is it expected behaviour. It doesn't seem that anybody else having the same issue. Google search didn't reveal anything.

I'm using the new components

Upvotes: 9

Views: 8765

Answers (4)

RenRen
RenRen

Reputation: 11407

In my case the problem was that I used the same name on the state and action fields.

Upvotes: 0

Bas Witte
Bas Witte

Reputation: 56

Was also running into this, for me the fix was to check the structure of the store, e.g. all actions should be defined within the action brackets - obviously.

Nevertheless took me a while to figure this out, because stores can get complex and defining actions on the root level of a store will not raise any errors.

Upvotes: 0

Awais Sikander
Awais Sikander

Reputation: 81

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

some times using the same name for two stores causes this issue.

Upvotes: 7

David Moles
David Moles

Reputation: 51169

I ran into this when I mistakenly tried to destructure actions as well as state and getters with storeToRefs, after not reading this bit from the Pinia docs carefully enough:

In order to extract properties from the store while keeping its reactivity, you need to use storeToRefs(). It will create refs for every reactive property. This is useful when you are only using state from the store but not calling any action. Note you can destructure actions directly from the store [emphasis added] as they are bound to the store itself too.

So given this template —

<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();

— if you try to destructure both things and frob with storeToRefs, you'll get TypeError: $setup.frob is not a function. Actions, unlike state and getters, should be destructured directly from the store object:

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

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

Note that in Chrome the error will show up as Uncaught (in promise), while in Safari it will show up as Unhandled Promise Rejection.

Upvotes: 8

Related Questions