Currently working in Vue3 using Typescript, Vuetify, and the Composition API. I am also defining stores using Pinia.
I am trying to call a getter method in another getter method, both of which are within the same store, but I'm getting a series of errors and everything I've found so far seems to cause more/other errors.
This is an example of what I'm working with:
// ... imports
export const useExampleStore = defineStore('example-store', {
state: () =>
({
report: { ...initialReport },
groups: { ...initialGroups },
} as ExStoreState),
getters: {
exMethodOne(state) { // <----------- having issues with calling this method
if (state.report.type != 'code' || !state.report.forceAdmin) {
return formatParams(state.groups.selections);
} else {
return state.report.selection_codes;
}
},
exMethodTwo(state, getters) { // <---------- issues calling exMethodOne in this
const selectionCodes = getters.exMethodOne() // <---------- issue occurs here
return {
'filters[selection_codes][]': selectionCodes,
// ... additional hash items, similar to that above
} as any;
},
},
actions: {
// ... action methods
},
});
Initially, I thought I'd be able to just call exMethodOne
in exMethodTwo
after defining it, ex: const selectionCodes = exMethodOne()
, but that gives a Cannot find name 'exMethodOne'
error.
After that didn't work, I took to the internet and everything I've seen tells me to add getters
to the arguments for exMethodTwo
like you see in the example above, then call exMethodOne
like so:
exMethodTwo(state, getters) {
const selectionCodes = getters.exMethodOne()
// ... etc. etc.
When I add this getters
argument though, I got this set of errors from Vue:
No overload matches this call.
Overload 1 of 3, '(id: "statements-report", options: Omit<DefineStoreOptions<"statements-report", SrsState, _GettersTree<SrsState>, { getLabelGroups(report: ReportType): Promise<...>; SongSearch(): Promise<...>; getUserStatemntsReport(values: StatementReportParams): Promise<...>; getStatement(values: StatementDownloadParams): Promise<...>; getAdminStatemntsReport(values: StatementReportParams): Promise<...>; }>, "id">): StoreDefinition<...>', gave the following error.
Type '(state: any, getters: any) => any' is not assignable to type '(() => any) | ((state: SrsState & PiniaCustomStateProperties<SrsState>) => any)'.
Type '(state: any, getters: any) => any' is not assignable to type '() => any'.
Target signature provides too few arguments. Expected 2 or more, but got 0.
Overload 2 of 3, '(id: "statements-report", storeSetup: () => unknown, options?: DefineSetupStoreOptions<"statements-report", _UnwrapAll<Pick<unknown, never>>, Pick<unknown, never>, Pick<unknown, never>> | undefined): StoreDefinition<...>', gave the following error.
Argument of type '{ state: () => SrsState; getters: { accountNumber: () => string; resetReport(state: SrsState & PiniaCustomStateProperties<SrsState>): void; configureSongCodes(state: SrsState & PiniaCustomStateProperties<...>): any; filterSetter(state: any, getters: any): any; }; actions: { ...; }; }' is not assignable to parameter of type '() => unknown'.
Object literal may only specify known properties, and 'state' does not exist in type '() => unknown'.
The errors go away if I remove the getters
argument, but it just brings me back to the Cannot find name 'exMethodOne'
error.
How can I call my exMethodOne
from within my exMethodTwo
considering they're both in the same Pinia store?