Vue3 issue calling getter method in another getter method within the same Pinia store

372 views Asked by At

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?

0

There are 0 answers