How to use pinia getter in setup ? (with a wrapped defineStore and async fetching) - asynchronous

Question

I don't succeed to use a Pinia getter properly in the setup part.
It's working when I use the getter directly in the part, but not in the part.
Here is my (simplified) pinia store :
export const useCharactersStore = () => {
const charactersStoreBuilder = defineStore("characters", {
state: (): State => ({
characters: {},
}),
getters: {
getCharacter(state) {
return (characterId: string) => state.characters[characterId];
},
},
actions: {
async fetchCharacters() {
this.characters = {
1: "Character 1",
2: "Character 2",
};
},
},
});
const charactersStore = charactersStoreBuilder();
charactersStore.fetchCharacters(); // async fetching
return charactersStore;
And here is my usage :
<script setup>
import { useCharactersStore } from "#/stores/characters";
import { storeToRefs } from "pinia";
const characterId = 1;
const characterStore = useCharactersStore();
// Various alternatives :
// Don't work
const { getCharacter } = storeToRefs(characterStore);
const character = getCharacter.value(characterId);
// Don't work
const character = characterStore.getCharacter(characterId);
// Don't work
const character = characterStore.getCharacter(characterId);
// Work
const getCharacter = characterStore.getCharacter;
</setup>
<template>
<pre>
<!-- Don't work -->
{{ character }}
<!-- Work -->
{{ getCharacter(characterId) }}
</pre>
</template>
I've also tried with character as a ref, with its value updated with a watch, and various things. I'm absolutely lost :/

Answer 1

Your question is ambiguous. I do not know what you mean by.
It's working when I use the getter directly in the part, but not in the part.
However, I made a slight modification to your code. For me, this works.
// CharactersStore.ts
import { defineStore } from 'pinia'
export const useCharactersStore = () => {
const charactersStoreBuilder = defineStore('CharactersStore', {
state: () => {
return {
characters: {} as Record<number | string, string | number>,
}
},
actions: {
// async is irrelevant here. You can use setTimeout to simulate async here.
async fetchCharacters() {
this.characters = {
1: 'Character 1',
2: 'Character 2',
}
},
},
getters: {
getCharacterByID: (state) => (characterId: string | number) =>
state.characters[characterId],
},
})
const charactersStore = charactersStoreBuilder()
charactersStore.fetchCharacters() // async fetching
return charactersStore
}
The Test page I used.
<script setup lang="ts">
import { storeToRefs } from 'pinia'
const c = useCharactersStore()
const characterId = 1 // even though it works, It is not reactive.
const character = c.getCharacterByID(characterId)
const { getCharacterByID: getCharacterWithStoreRef } = storeToRefs(c)
</script>
<template>
<div>
<h1>Test page</h1>
<div>
<pre>
Get character by Id : {{ c.getCharacterByID(characterId) }}
character {{ character }}
getCharacterWithStoreRef {{ getCharacterWithStoreRef(characterId) }}
</pre>
</div>
</div>
</template>
Result
Test the solution provided
Feel free to let me know if it works for you. Happy coding
Additional information
Read more about Passing arguments to getters in Pinia