separating getters and actions to dedicated files break typing of this

[yaquawa]

I want to separate my getters and actions to dedicated files instead of just put them all together in one store file, like this:

import { defineStore } from 'pinia'
import { state } from './state'
import { getters } from './getters'
import { actions } from './actions'

export const useMainStore = defineStore({
  id: 'main',
  state: () => state,
  getters,
  actions,
})

But in the getters and actions file, I can not use this to reference the store object now.
What should I do for such a situation?
Thanks!

[posva]

You have to put the getters and actions inlined on the defineStore to infer typings. I don't think there is a way to manually type this in getters and actions unless you manually create the types for state, getters, and actions

[yaquawa]

@posva So the only thing I could do is breaking a gigantic store into small ones?
It'll be helpful if you can give some best practices for how to organize big store(maybe have this topic on the README).
For example should I split them by feature or role or any other category?

Thanks!

[posva]

You will have to manually type this using the Store type and creating types for each of its generics
https://github.com/posva/pinia/blob/fc56acb41e3753ddc8aef965d3d78bfac4f93db5/src/store.ts#L216

Some of them can be inferred with ReturnType<typeof state> but you will need to manually do G and A for getters and actions

[posva]

you can also split a store into multiple stores

[vycoder]

Hi @posva, if it's not too much to ask, can you provide an example (or even include it in the documentation) of how to properly type this when splitting them into their own separate files?

[aparajita]

@yaquawa @vycoder , see here for an example of how to split up a store.

[theodinspire]

I was able to get this done this way:

type Getters = {
	[Property in keyof typeof getters]: ReturnType<typeof getters[Property]>
} // Maps your getters to their return types

type Actions { ... }; // The type definition for your actions
export const actions: Actions & ThisType<typeof defaultState & Getters & Actions> = { ... };

defineStore('id', { state: () => defaultState, getters, actions });