How to split store in different files? And the limits of object type inference

[nicolidin]

Hello,

I would simply like to split a store in different files and especially to make my different store parts (state, getter, actions) able to inherit from interface, abstract classes, etc..
Furthermore, splitting parts of a Pinia store seems to break the this usage.
As Pinia seems to not really be typed (cause it is only based on object type inference), we just can't split the different parts of a store.

I really wonder why Pinia didn't do like vuex-smart-module allowing to have strong typing through classes usage and to use directly the type of each parts of a store without creating redundant Interface types.
People easily say, "oh classes usage like in vuex-smart-module is more verbose cause you have to specify generics", but when you have to use State, Getter or Action TYPE, you clearly don't want to write/specify n interfaces with k methods for each part a store.

It is common for a lot of projects with strong architecture to have for requirement the need of an abstraction between different parts of different stores.
Example two instances of store like:
ProjectResourceStore and HomeResourceStore having each one Action inheriting from the same abstract class AResourceActions.
What is really useful is that AResourceActions allows having default implementations and specifying a "contract".
ProjectResourceAction and HomeResourceAction will be obligated to implement all non-implemented AResourceActions methods.

What I say above seems to be clearly impossible with Pinia as it has only object type inference.

It's also important to understand that with classes if I want to have a Type of a store part (State, Getter, Action), I don't have to manually specify all the properties/methods in a redundant Interface that will be used as a way to have non-infered type.
Indeed, with classes, I can directly use the class as a Type.

This problem has already been mentioned here: #343, but my issue just try to expose the problem with other related issues and limitations of Pinia type system.
Also, no satisfying code example in the original issue has been provided.

[posva]

It would be nice to document how to split the store into multiple files or functions when needed but the problem has always been mentioned without code samples. It is crucial that real-world examples are provided to better understand what kind of splitting is needed.

So far I identified these possibilities:

• Splitting actions or getters into functions that receive everything needed as parameters (Store type or ReturnType<typeof useStore> could be useful)
• Splitting a store into smaller stores
• Using a setup store to split the store into smaller functions that are composables

[slacktracer]

@posva Could you , please, elaborate on this: "Using a setup store to split the store into smaller functions that are composables"?

I was not able to find much about splitting setup stores, or more about setup stores in general. I believe it is the best approach (for me).

I want to do that, I want to have individual files for my actions but them what are my options to pass state and refs around... It all very unclear to me still. Sorry. Any pointers would be much appreciated.

I wonder if I have a bunch of composables do I still "need" Pinia? 🤷🏼‍♀️

[posva]

Regarding the class types, that's a completely different paradigm and, like vuex-smart-module, it should exist in a separate package. I don't use vuex-smart-module but you seem to like it very much, you should write a similar plugin for pinia!

[exbotanical]

It would be nice to document how to split the store into multiple files

This is a considerably prevalent design pattern (using Vuex 4 currently) for my team, and we'd like to continue using it.

So far I identified these possibilities:

• Splitting actions or getters into functions that receive everything needed as parameters (Store type or ReturnType<typeof useStore> could be useful)
• Splitting a store into smaller stores
• Using a setup store to split the store into smaller functions that are composables

@posva Have you had the chance to try any of these options you've listed? I'm just curious if anyone has figured out a clean way to implement this before I deep dive this weekend. I'd be happy to (attempt to) contribute if supporting this pattern is indeed a direction you'd like to go in with Pinia.

In any case, I'm super impressed with Pinia and look forward to adopting it across our projects over the next year!

[rzym-on]

Maybe I'll put something, that will be usefull to this discussion. So far I came across with this example that is working well for me with pinia store.

It is crucial that real-world examples are provided to better understand what kind of splitting is needed.

And according to this, I provided a real-world example. I have some common CRUD getters and actions that I want to use in multiple stores.

baseCrud.ts file:

import axios from 'axios';

export interface CrudState {
  loading: boolean;
  items: any[];
  apiUrl: string;
}

export function crudState(apiCollectionUrl: string) {
  return (): CrudState => ({
    loading: false,
    items: [],
    apiUrl: `http://localhost:8080/api/${apiCollectionUrl}`,
  });
}

export function crudGetters() {
  return {
    allItems: (state:CrudState) => state.items,
    getById():any {
      return (id) => this.allItems.find((x) => x.id === id);
    },
  };
}

export function crudActions() {
  return {
    async initStore() {
      this.loading = true;
      const { data } = await axios.get(this.apiUrl);
      this.items = data;
      this.loading = false;
    },
    async clearAndInitStore() {
      this.items = [];
      await this.initStore();
    },
  };
}

taskStore.ts file in same directory:

import { defineStore } from 'pinia';
import { crudState, crudGetters, crudActions } from './baseCrud';

export default defineStore('tasks', {
  state: crudState('tasks/'),
  getters: {
    ...crudGetters(),
    // Your additional getters
    activeTasks: (state) => state.items.filter((task) => !task.done),
    allItemsCount(): number {
      return this.allItems.length;
    },
  },
  actions: {
    ...crudActions(),
    // Your additional actions
  },
});

using taskStore in main.ts file in same directory:

import useTaskStore from './taskStore';

// Autocompletion works fine here
const taskStore = useTaskStore();
taskStore.initStore();
const count = taskStore.allItemsCount;
const task = taskStore.getById(1);

[posva]

This was added to #829

[aparajita]

Just a followup on this. The example provided by @rzym-on may run, but it fails under strict type checking. After a massive amount of sleuthing into the pinia types, I finally figured out how to split up a store into multiple files and preserve complete type checking. Here we go!

First you need to add this utility somewhere in your project. Let's assume it's in @store/:

extractStore.ts

import type {
  PiniaCustomStateProperties,
  StoreActions,
  StoreGeneric,
  StoreGetters,
  StoreState
} from 'pinia'
import type { ToRefs } from 'vue'
import { isReactive, isRef, toRaw, toRef } from 'vue'

type Extracted<SS> = ToRefs<
  StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>
> &
  StoreActions<SS>

/**
 * Creates an object of references with all the state, getters, actions
 * and plugin-added state properties of the store.
 *
 * @param store - store to extract the refs from
 */
export function extractStore<SS extends StoreGeneric>(store: SS): Extracted<SS> {
  const rawStore = toRaw(store)
  const refs: Record<string, unknown> = {}

  for (const [key, value] of Object.entries(rawStore)) {
    if (isRef(value) || isReactive(value)) {
      refs[key] = toRef(store, key)
    } else if (typeof value === 'function') {
      refs[key] = value
    }
  }

  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  return refs as Extracted<SS>
}

Now create a directory for the store. Let's assume it's @store/foo. These files go in the directory:

state.ts

export interface State {
  foo: string
  bar: number
}

export const useState = defineStore({
  id: 'repo.state',

  state: (): State => {
    return {
      foo: 'bar',
      bar: 7
    }
  }
})

getters.ts

import { computed } from 'vue'
import { useState } from './state'

export const useGetters = defineStore('repo.getters', () => {
  const state = useState()

  const foobar = computed((): string => {
    return `foo-${state.foo}`
  })

  const doubleBar = computed((): string => {
    return state.bar * 2
  })

  return {
    foobar,
    doubleBar
  }
})

actions.ts

import { useState } from './state'

export const useActions = defineStore('repo.actions', () => {
  const state = useState()

  function alertFoo(): void {
    alert(state.foo)
  }

  function incrementBar(amount = 1) {
    state.bar += amount
  }

  // Note you are free to define as many internal functions as you want.
  // You only expose the functions that are returned.
  return {
    alerttFoo,
    incrementBar
  }
})

Now you can bring all of the pieces together like this:

import { extractStore } from '@store/extractStore'
import { defineStore } from 'pinia'
import { useActions } from './actions'
import { useGetters } from './getters'
import { useState } from './state'

export const useFooStore = defineStore('foo', () => {
  return {
    ...extractStore(useState()),
    ...extractStore(useGetters()),
    ...extractStore(useActions())
  }
})

Boom! Completely typed and nicely factored. You would then import it like this:

import { useFooStore } from '@store/foo'

const store = useFooStore()
let foo = store.foo // 'bar'
foo = store.foobar // 'foo-bar'
let bar = store.doubleBar // 14
store.incrementBar(3) // store.bar === 10
bar = store.doubleBar // 20

Enjoy! 😁

[JacobArrow]

I've set this up as above, but get the following error.
Any idea what might be wrong?

 TypeError: Cannot read properties of undefined (reading 'has')
    at Module.useStore (file:///var/www/html/dune/node_modules/pinia/dist/pinia.mjs:1702:23)
    at /var/www/html/dune/store/foo/index.ts:13:65
    at file:///var/www/html/dune/node_modules/pinia/dist/pinia.mjs:1436:32
    at EffectScope.run (/var/www/html/dune/node_modules/@vue/reactivity/dist/reactivity.cjs.js:38:24)
    at file:///var/www/html/dune/node_modules/pinia/dist/pinia.mjs:1436:22
    at EffectScope.run (/var/www/html/dune/node_modules/@vue/reactivity/dist/reactivity.cjs.js:38:24)
    at createSetupStore (file:///var/www/html/dune/node_modules/pinia/dist/pinia.mjs:1434:33)
    at Module.useStore (file:///var/www/html/dune/node_modules/pinia/dist/pinia.mjs:1705:17)

[buglist3r]

I got the same error and i can't fix it :/

[DawidKopys]

Also, seems to not work with Nuxt or SSR in general. I am getting error during hydration:

chunk-BVQHDTV7.js:1326 Uncaught (in promise) TypeError: 'set' on proxy: trap returned falsish for property 'doubledCounter'
    at set value [as value] (chunk-BVQHDTV7.js:1326:29)
    at createSetupStore (pinia.mjs:1463:30)
    at useStore (pinia.mjs:1716:17)
    at setup (index.vue:30:22)

... where doubledCounter is a getter I have defined as a computed in getters.ts.

I looks as if a getter wasn't properly recognized as computed and pinia tries to initialize it with a value during hydration.

[HichemBenChaaben]

@aparajita love the solution, there are two odd things imo

• adds multiple stores (obvious)
• adds getters under store.$state

[aparajita]

I gave up on pinia. I'm using vueuse createGlobalState as a store.

[Grawl]

@aparajita thank you! but how to access getters inside of actions?

[aparajita]

@Grawl the getters are just a regular store with access to your state.

actions.ts

import { useGetters } from './getters'
import { useState } from ['./state']()

export const useActions = defineStore('repo.actions', () => {
  const state = useState()
  const getters = useGetters()

  function alertFoo(): void {
    alert(getters.doubleBar)
  }
}

[mahmoudsaeed]

@aparajita It sounds like an anti-pattern to define different stores for state, actions and getters.

[nicolidin]

Yes @mahmoudsaeed, I think the same it is really hacky and a bad pattern, hope there will be a real fix.

[aparajita]

@mahmoudsaeed Thanks for stating the obvious. Feel free to find a more elegant workaround.

[aparajita]

@mahmoudsaeed and @nicolidin, I should add that I was actually following @posva's earlier suggestion to split up a store into smaller stores, so if it's an anti-pattern you can blame him! I was unable to get his other suggestions to work with strict type checking — it requires some serious TypeScript ninja skills because of the way pinia infers types.

Obviously it would be nice if we had an easier way to split up stores.

[mahmoudsaeed]

@aparajita I think @posva meant to say splitting up a store into smaller single-file stores.

[aparajita]

As I said before, if you can figure out a way to split up a store that is completely type safe and retains type inference, please do. Since you have the time to criticize others, maybe you would be kind enough to spend the time and effort to come up with a better solution.

[mahmoudsaeed]

@aparajita Please don't take it personally. I appreciate your solution.

[tunngtv]

you can separate it simple

actions.ts

import { axiosInstance, appClient } from '../../boot/axios';
import { Regs, Sget, User, UserKey } from '../../components/models/model';
import { UserDat } from '../../components/models/acclist';
import { RepUser } from '../../components/models/StoreInterFace';

import { useState } from './state';
import { defineStore } from 'pinia';



const REGISTER_ROUTE = '/register';
const LOGIN_ROUTE = '/login';
const AUTH_LOGOUT = '/logout';


const empty = UserDat;

export const useActions = defineStore('auth.actions', () => {
  const state = useState();

  async function register(data: Regs) {
    try {
      const r = await axiosInstance.post(REGISTER_ROUTE, data);
      return r.data;
    } catch (error) {
     
      return false;
    }
  }

  async function login(data: Regs) {
    try {
      const response: {
        data: { status: boolean; data: { user: User; data: string } };
      } = await axiosInstance.post(LOGIN_ROUTE, data);
      const mainData = response?.data?.data;
      const user = mainData?.user;
      if (user) {
        state.user = user;
        const to: string = mainData.data;
        axiosInstance.defaults.headers.common = {
          'content-type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest',
          'M-Version': process.env.APP_VERSION,
          'M-Client': appClient,
          Authorization: `Bearer ${to}`,
        };
        return <RepUser>{ status: true };
      }
      const rep = <RepUser>(
        (response?.data?.data ? response?.data?.data : response?.data)
      );
      return rep;
    } catch (ee) {
      return false;
    }
  }

  function firstlogin(data: { user: User; data: string }) {
    if (data?.user) {
      const newdata = data.user;
      state.user = newdata;
      const to: string = data.data;
      axiosInstance.defaults.headers.common = {
        'content-type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        Authorization: `Bearer ${to}`,
      };
      return true;
    }
  }

  function updateuser(data: { tok: string; user: User }) {
    const newdata = data.user;
    state.user = newdata;
    return true;
  }

  function userUpdate(data: { id: string; value: boolean | string }) {
    const updateSate = <UserKey>(<unknown>state.user);
    updateSate[data.id] = data.value;
    return true;
  }

  function fetch() {
  
  }

  async function applogout() {
   
  }

  async function logout() {
    
  }
  return {
    register,
    login,
    updateuser,
    userUpdate,
    firstlogin,
    fetch,
    applogout,
    logout,
  };
});

getters.ts

import { defineStore } from 'pinia';
import { computed } from 'vue';
import { User } from '../../components/models/model';
import { useState } from './state';

export const useGetters = defineStore('auth.getters', () => {
  const state = useState();

  const user = computed((): User => {
    return state.user;
  });

  const loggedIn = computed((): boolean => {
    return state.user.login;
  });

  const check = (roles: string | string[]) => {
    const user = state.user;
    if (user && user.roleNames.length > 0) {
      if (Array.isArray(roles) && roles.length) {
        for (const role of roles) {
          if (!user.roleNames.includes(String(role))) {
            return false;
          }
        }
      } else if (roles) {
        const nrole: string = <string>roles;
        if (!user.roleNames.includes(nrole)) {
          return false;
        }
      }
      return true;
    }
    return false;
  };

  return {
    user,
    loggedIn,
    check,
  };
});

index.ts

import { extractStore } from '../extractStore';
import { defineStore } from 'pinia';
import { useActions } from './actions';
import { useGetters } from './getters';
import { useState } from './state';

export const useAuthStore = defineStore('auth', () => {
  return {
    ...extractStore(useState()),
    ...extractStore(useGetters()),
    ...extractStore(useActions()),
  };
});

state.ts

import { defineStore } from 'pinia';
import { UserDat } from '../../components/models/acclist';
import { State } from '../../components/models/StoreInterFace';

export const useState = defineStore({
  id: 'auth.state',
  state: (): State => {
    return {
      user: UserDat,
    };
  },
});

extractStore.ts

import type {
  PiniaCustomStateProperties,
  StoreActions,
  StoreGeneric,
  StoreGetters,
  StoreState,
} from 'pinia';
import type { ToRefs } from 'vue';
import { isReactive, isRef, toRaw, toRef } from 'vue';

type Extracted<SS> = ToRefs<
  StoreState<SS> & StoreGetters<SS> & PiniaCustomStateProperties<StoreState<SS>>
> &
  StoreActions<SS>;

/**
 * Creates an object of references with all the state, getters, actions
 * and plugin-added state properties of the store.
 *
 * @param store - store to extract the refs from
 */
export function extractStore<SS extends StoreGeneric>(
  store: SS
): Extracted<SS> {
  const rawStore = toRaw(store);
  const refs: Record<string, unknown> = {};

  for (const [key, value] of Object.entries(rawStore)) {
    if (isRef(value) || isReactive(value)) {
      refs[key] = toRef(store, key);
    } else if (typeof value === 'function') {
      refs[key] = value;
    }
  }

  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  return refs as Extracted<SS>;
}

StoreInterFace.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
import { Store } from 'pinia';
import { Freg, Regs, User } from './model';

export type PiniaActionAdaptor<
  Type extends Record<string, (...args: any) => any>,
  StoreType extends Store
> = {
  [Key in keyof Type]: (
    this: StoreType,
    ...p: Parameters<Type[Key]>
  ) => ReturnType<Type[Key]>;
};

export type PiniaGetterAdaptor<GettersType, StoreType extends Store> = {
  [Key in keyof GettersType]: (
    this: StoreType,
    state: StoreType['$state']
  ) => GettersType[Key];
};

export type State = {
  user: User;
};

export type Getters = {
  user: User;
  loggedIn: boolean;
  check: (roles: string | string[]) => boolean;
};

export interface RepUser {
  status: boolean;
  data: { user: User; data: string };
}

export type Actions = {
  register?: (data: Regs) => Promise<number | string | Freg> | boolean;
  loggedIn?: () => boolean;
  check?: (roles: string | string[]) => boolean;
  login?: (data: Regs) => Promise<false | RepUser>;
  logout?: () => Promise<boolean>;
  applogout?: () => boolean;
  passwordForgot?: (data: string[]) => Promise<boolean | Freg>;
  passwordReset?: (data: string[]) => Promise<boolean | Freg>;
  updateuser?: (data: { id: string; user: User }) => boolean;
  userUpdate?: (data: { id: string; value: boolean | string }) => boolean;
  firstlogin?: (data: { user: User; data: string }) => boolean;
  newfetch?: () => Promise<boolean | string | User>;
  fetch?: () => boolean;
  user?: () => User;
};

export type AuthStore = Store<'auth', State, Getters, Actions>;

@diadal I tried it this afternoon, but it looks like we are defining more stores, everything is fine, but looking at vue devtools it's weird :D, anyway thank you very much

[diadal]

you need to clean up. the code to your need also creates your interface based on what you need, if you need to access your store from all your components simply create the plugin helper https://github.com/vuejs/pinia/issues/802#issuecomment-1100196675

app.config.globalProperties.$myStore = helper;

[alexisjamet]

I refactored it a bit, here is my suggestion:

Folders and Files structure:

---

Folder /stores

File /types.ts

import { Store } from 'pinia'

export type PiniaActionTree<
  Actions extends Record<string, (...args: any) => any>,
  UsedStore extends Store,
> = {
  [Key in keyof Actions]: (
    this: UsedStore,
    ...p: Parameters<Actions[Key]>
  ) => ReturnType<Actions[Key]>
}

export type PiniaGetterTree<
  Getters extends Record<string, any>,
  UsedStore extends Store,
> = {
  [k in keyof Getters]: Getters[k] extends (...args: any) => infer R
    ? (
        this: UsedStore & Getters,
        state: UsedStore['$state'],
      ) => (...p: Parameters<Getters[k]>) => R
    : (this: UsedStore & Getters, state: UsedStore['$state']) => Getters[k]
}

File /index.ts

A single file exporting all my stores (I prefer it this way when importing stores in components):

import { agentStore } from '@/domains/agent/store'
import { AgentStore } from '@/domains/agent/store/types'
import { authStore } from '@/domains/auth/store'
import { AuthStore } from '@/domains/auth/store/types'
import { uiStore } from '@/domains/ui/store'
import { UIStore } from '@/domains/ui/store/types'
import { userStore } from '@/domains/user/store'
import { UserStore } from '@/domains/user/store/types'

export const useAuthStore: () => AuthStore = () => authStore()
export const useAgentStore: () => AgentStore = () => agentStore()
export const useUserStore: () => UserStore = () => userStore()
export const useUIStore: () => UIStore = () => uiStore()

---

Folder /auth

File /index.ts

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

export const authStore = defineStore('auth', {
  state: () => state,
  getters,
  actions,
})

File /types.ts

import { Store } from 'pinia'
import { Actions } from './actions/types'
import { AuthGetters } from './getters/types'

export interface State {
  isAuthenticated: boolean
  errorMessage: null | string
}

export type AuthStore<G = AuthGetters> = Store<'auth', State, G, Actions>

File /state.ts

import { State } from './types'

export const state: State = {
  isAuthenticated: false,
  errorMessage: null,
}

---

Folder /actions

File /types.ts

import { PiniaActionTree } from '@/stores/types'
import { AuthStore } from '../types'

enum ActionNames {
  CheckReferralCode = 'checkReferralCode',
  Logout = 'logout',
  ResetErrorMessage = 'resetErrorMessage',
}

export type Actions = {
  [ActionNames.CheckReferralCode](code: string): Promise<void>
  [ActionNames.Logout](): Promise<void>
  [ActionNames.ResetErrorMessage](): void
}

export type AuthActions = PiniaActionTree<Actions, AuthStore>

File /index.ts

import { logout } from './logout'
import { resetErrorMessage } from './reset-error-message'

export const actions: AuthActions = {
  checkReferralCode,
  resetErrorMessage,
  logout,
}

File /logout.ts

import router from '@/router'
import { RoutesNames } from '@/router/routes/types'
import Services from '@/services'
import { useUserStore } from '@/stores'
import { AuthActions } from './types'

export const logout: AuthActions['logout'] = async function () {
  await Services.getInstance().authentication.signOut()
  this.isAuthenticated = false
  useUserStore().setUser(null)
  router.push({ name: RoutesNames.Home })
}

---

Folder /getters

File /types.ts

import { PiniaGetterTree } from '@/stores/types'
import { AuthStore } from '../types'

export enum GetterNames {
  DeepLink = 'deepLink',
}

export type Getters = {
  [GetterNames.DeepLink](): string
}

export type AuthGetters = PiniaGetterTree<Getters, AuthStore<Getters>>

File /index.ts

import { AuthGetters } from './types'
import { deepLink } from './deep-link'

export const getters: AuthGetters = {
  deepLink,
}

File /deep-link.ts

import { API_URL } from '@/external/api/config'
import { AuthGetters } from './types'

export const deepLink: AuthGetters['deepLink'] = function (state) {
  return () => API_URL + '/deeplink/' + state.referralCode
}

---

Example of using my Pinia stores (actions, state, getters) in components:

<script lang="ts" setup>
import { computed, toRefs, ref, onMounted } from 'vue'
import { useUIStore, useAuthStore } from '@/stores'

const { logout } = useAuthStore() // Store actions
const { isAuthenticated, deepLink } = toRefs(authStore)  // Store state and getters
const { isLoading } = toRefs(useUIStore())  // Store state and getters
</script>

<template>
<h1 v-if="isAuthenticated">You are authenticated</h1>
<div>Here is the result of my getter: {{ deepLink() }}</div>
<button @click="logout">Logout</button>
</template>

[dotlogix]

If someone is interested. I came up with this.
Minimal setup, full type inferance, allows inheritance.

Type Definitions:

piniaTypes.ts:

import { StateTree, Store} from 'pinia'

export type PiniaStateTree = StateTree
export type PiniaGetterTree = Record<string, (...args: any) => any>
export type PiniaActionTree = Record<string, (...args: any) => any>

export type PickState<TStore extends Store> = TStore extends Store<string, infer TState, PiniaGetterTree, PiniaActionTree> ? TState : PiniaStateTree
export type PickActions<TStore extends Store> = TStore extends Store<string, PiniaStateTree, PiniaGetterTree, infer TActions> ? TActions : never
export type PickGetters<TStore extends Store> = TStore extends Store<string, PiniaStateTree, infer TGetters, PiniaActionTree> ? TGetters : never

export type CompatiblePiniaState<TState> = () => TState
export type CompatiblePiniaGetter<TGetter extends (...args: any) => any, TStore extends Store> = (this: TStore, state: PickState<TStore>) => ReturnType<TGetter>
export type CompatiblePiniaGetters<TGetters extends PiniaGetterTree, TStore extends Store> = {
  [Key in keyof TGetters]: CompatiblePiniaGetter<TGetters[Key], CompatibleStore<TStore>>;
}

export type CompatiblePiniaAction<TAction extends (...args: any) => any, TStore extends Store> = (this: TStore, ...args: Parameters<TAction>) => ReturnType<TAction>
export type CompatiblePiniaActions<TActions extends PiniaActionTree, TStore extends Store> = {
  [Key in keyof TActions]: CompatiblePiniaAction<TActions[Key], CompatibleStore<TStore>>;
}

export type CompatibleStore<TStore extends Store> = TStore extends Store<string, infer TState, infer TGetters, infer TActions> ? Store<string, TState, TGetters, TActions> : never

export type PiniaState<TStore extends Store> = CompatiblePiniaState<PickState<TStore>>;
export type PiniaGetters<TStore extends Store> = CompatiblePiniaGetters<PickGetters<TStore>, TStore>;
export type PiniaActions<TStore extends Store> = CompatiblePiniaActions<PickActions<TStore>, TStore>;
export type PiniaStore<TStore extends Store> = {
   state: PiniaState<TStore>,
   getters: PiniaGetters<TStore>,
   actions: PiniaActions<TStore>
}

Counter Store:

actions.ts:

import { PiniaActions, PiniaActionTree } from '@common/piniaTypes';
import { CounterStore } from '@common/counter';

export interface CounterActions extends PiniaActionTree {
  increment(amount: number): void;
}

export const actions: PiniaActions<CounterStore> = {
  increment(amount) {
    this.count += amount;
  },
};

getters.ts

import { PiniaGetters, PiniaGetterTree } from '@common/piniaTypes';
import { CounterStore } from '@common/counter';

export interface CounterGetters extends PiniaGetterTree {
  doubleCount(): number;
  offsetCount(): (offset: number) => number;
  offsetDoubleCount(): (offset: number) => number;
}

export const getters: PiniaGetters<CounterStore> = {
  doubleCount(state) {
    return state.count * 2;
  },
  offsetCount(state) {
    return (amount) => state.count + amount;
  },
  offsetDoubleCount() {
    return (amount) => this.doubleCount + amount;
  },
};

state.ts

import { PiniaState, PiniaStateTree } from '@common/piniaTypes';
import { CounterStore } from '@common/counter';

export interface CounterState extends PiniaStateTree {
    count: number
}

export const state : PiniaState<CounterStore> = () => ({ count: 0 })

import { defineStore, Store, StoreDefinition } from 'pinia'
import { CounterState, state} from '@common/counter/state'
import { CounterActions, actions } from '@common/counter/actions'
import { CounterGetters, getters } from '@common/counter/getters'

export type CounterStore = Store<'counter', CounterState, CounterGetters, CounterActions>
export type CounterStoreDefinition = StoreDefinition<'counter', CounterState, CounterGetters, CounterActions>

export const useStore: CounterStoreDefinition = defineStore('counter', { state, getters, actions })

Inherited Counter Store

extendedCounter.ts

import { defineStore, Store, StoreDefinition } from 'pinia';
import { PiniaStore } from '@common/piniaTypes';
import { CounterState, state } from '@common/counter/state';
import { CounterGetters, getters } from '@common/counter/getters';
import { CounterActions, actions } from '@common/counter/actions';

interface ExtendedCounterState extends CounterState {
  currencySymbol: string;
}

interface ExtendedCounterGetters extends CounterGetters {
  countWithCurrency(): string;
}

type ExtendedCounterStore = Store<'extendedCounterStore', ExtendedCounterState, ExtendedCounterGetters, CounterActions>;
type ExtendedCounterStoreDefinition = StoreDefinition<'extendedCounterStore', ExtendedCounterState, ExtendedCounterGetters, CounterActions>;

const extendedStore: PiniaStore<ExtendedCounterStore> = {
  state: () => ({ ...state(), currencySymbol: '$' }),
  getters: {
    ...getters,
    countWithCurrency(state) {
      return `${state.count} ${state.currencySymbol}`;
    },
  },
  actions: {
    ...actions,
  },
};

export const useExtendedCounter: ExtendedCounterStoreDefinition = defineStore('extendedCounterStore', extendedStore);

Have fun :)

[velly]

I think, Pinia store exsits in pieces. It's very important.
Back to the question. I totally stand with you.

But from my point of view. All types should be placed together under a types file.

import type {
PiniaActionTree,
PiniaGetterTree,
PiniaStateTree,
} from "../@common/piniaTypes";
import type { Store, StoreDefinition } from "pinia";

export interface CounterGetters extends PiniaGetterTree {
doubleCount(): number;
}

export interface CounterActions extends PiniaActionTree {
increment(amount: number): void;
}

export interface CounterState extends PiniaStateTree {
counter: number;
}

export type Id = "counter";

export type CounterStore = Store<
Id,
CounterState,
CounterGetters,
CounterActions

;

export type CounterStoreDefinition = StoreDefinition<
Id,
CounterState,
CounterGetters,
CounterStore

;

I hope this could help more people.

[SchDen]

Is it possible create setup without additional interface like in original solution?
For example actions - we have separated interface:

export interface CounterActions extends PiniaActionTree {
  increment(amount: number): void;
}

and implementation:

export const actions: PiniaActions<CounterStore> = {
  increment(amount) {
    this.count += amount;
  },
};

If i want to change something in action, I have to change it in interface too - not big deal, but could we avoid this? I really like original way like in guides, but definitely it's good idea to split actions, getters and state

[velly]

I'v no idea about it.
You should know the solution provided by @dotlogix is to abstract the store with types (OOP) and infer feature. With that, IDE could identify the interface change.

Change action should change the interface first. Namely, all action exstends the interface should follow the changes.

Interface has free inheritance relationship.

But what you mentioned is indeed a problem.
If we have to do this, we may add other interface? And the definition types should extends more than 1 interface?
Open for new and close for modification.

[aislanmaia]

How to use inside actions another stores modules?

[velly]

How to use inside actions another stores modules?

Just import and useStore.

With this solution for a month. I think reuse the implementation of parent interface is not so good.
You have to import the implemetations and exact it, not so perfect.

[iamresp]

Hi everyone!
Thought a lot on this issue after migrating a large project from Vuex to Pinia and figured out an idea how it can be done. So I ended up with a plugin in attempt to solve it: https://github.com/iamresp/pinia-extract
It goes with an interface that describes provided extra functions:

import {IPiniaExtractProperties} from "pinia-extract";

declare module "pinia" {
    export interface PiniaCustomProperties extends IPiniaExtractProperties {}
}

Plugin adds two methods to each store instance: defineAction and defineGetter, and postponed function for allowing safe definitions before app is initialized:

const store = postponed(useSomeStore);

export const requestGetCar = store.defineAction(
    async function (id: string) {
        const car = await fetch(`/api/cars/${id}`);
        this.car = await car.json();
    }
);

export const getCar = store.defineGetter(
    (state) => state.car,
);

Externally defined actions can be used as independent functions, for using getters there is a special API:

import {useGetter} from "pinia-extract";
import {getCar, requestCar} from "./store";

const car = useGetter(getCar);

await requestGetCar();

this in actions points to store instance like in native actions. Getters have state as an argument in a simplest scenario, but, in addition, I made it possible for them to work like selectors in Reselect (it seemed to me that composition it provides fits really nicely here):

export const getCustomerCar = defineGetter(
    getCustomerJobTitle, // first getter
    getCustomerName, // second getter
    getCarModel, // third getter
    getCarType, // fourth getter
    (
        jobTitle: string, // first getter return value
        name: string, // second getter return value
        model: string, // third getter return value
        carType: string, // fourth getter return value
        // ...instead of whole state
    ): string => `${jobTitle} ${name} drives ${model} ${type}`;
);

There are some more features in addition — I tried to describe most of things in readme.
Hope someone will find it helpful.

Thanks.

[power-cut]

@aparajita I like your solution, does your solution work with mapState & mapActions ?

[aparajita]

@aparajita I like your solution, does your solution work with mapState & mapActions ?

Haven't tried. I don't see why not, it is easy enough to do a simple test yourself.

[harriskhalil]

hi I am newbie dont know too much stuff but i made it work like this
NewUser.ts
`import { defineStore } from 'pinia';
import {state} from 'stores/newuser/state';
import {getters} from 'stores/newuser/getters';
import {actions} from 'stores/newuser/actions';

export const useNewUser = defineStore('NewUser', {

state,
getters,
actions
});
**actions.ts**import axios from 'axios';
import {useNewUser} from 'stores/newuser/NewUser';

export const actions= {

async getU() {
await axios.get('https://www.mecallapi.com/api/users').then((res)=>{
const state = useNewUser()
state.users = res.data

})

},

}
**state.ts**export const state = () => {
return {
users:[]
}
};
**getters.ts**export const getters = {
// user(state){
// return state.users
// }
user: (state :any) => state.users
}
`

[aparajita]

@harriskhalil We have all tried something that simple, and if it worked believe me we would use it. The first example at the top of this thread is exactly the same as what you propose. If you are using strict type checking it fails, at least with complex state.

[KrosFire]

Hi, I though I will also share my solution :)

I think the best way to manage your store is to create a separate file for each action.
To do that you need access to this. So to do that I've defined how it would look like:

/// Store.ts

import { Store } from 'pinia'
import Actions from './Actions'
import Getters from './Getters'
import State from './State'

export type MyStore = Store<'store-name', State, Getters, Actions>

State is the easiest to define I think :)

/// State.ts
import { StateTree } from 'pinia'

export default interface State extends StateTree {
  val1: string | null;
  val2: number;
  ....
}

Actions are unfortunately pretty chunky.
You can remove enum if you want. And maybe there is a smart way to easily wrap all functions with ActionWithStore type

/// Actions.ts

import { _ActionsTree } from 'pinia'
import { MyStore } from './Store'

export enum ActionTypes {
  ACTION1 = 'action1',
  ACTION2 = 'action2'
}

type ActionWithStore<T> = T extends (...params: infer U) => infer R
  ? (this: MyStore, ...params: U) => R
  : never;

type action1 = (val1: string) => void
type action2 = (val2: number) => void

export default interface Actions extends _ActionsTree {
  [ActionTypes.ACTION1]: ActionWithStore<action1>;
  [ActionTypes.ACTION2]: ActionWithStore<action2>;
}

Getters are defined in similar way

/// Getters.ts

import { _GettersTree } from 'pinia'
import { UnwrapRef } from 'vue'
import MyState from './State'

type GetterWithState<T> = T extends infer R
  ? (state: UnwrapRef<MyState>) => R
  : never;

export enum GetterTypes {
  GET1 = 'get1'
}

type Get1 = (val: string) => string | false

export default interface MyGetters extends _GettersTree<MyState> {
  [GetterTypes.GET1]: GetterWithState<Get1>
}

Thanks to these types, we can now easily use actions and getters, that are defined in separate files.
For example:

/// actions/action1.ts
import Actions from '@/types/store/my-store/Actions'

const action1: Actions['action1'] = function(... args) {
 ...
}

export default action1

/// getters/getter1.ts

import Getters from '@/types/store/my-store/Getters'
const get1: Getters['get1'] = (state) => (...args) => {
 ...
}

export default get1

Then you can create an index file in actions and getters folders, for ease import:

/// actions/index.ts

import Actions from '@/types/store/my-store/Actions'
import Action1 from './action1'

const actions: Actions = {
  Action1
}

export default actions

And that's it. I hope it will be useful :)

[aparajita]

@KrosFire looks good, just hope those internal types you are using don't change.

[aislanmaia]

Hi, I though I will also share my solution :)

I think the best way to manage your store is to create a separate file for each action.

Literally unmantainable because in a complex app, we'll have hundreds and hundreds of actions... imagine this quantity of files to handle... I think we need to think more in terms of "modules" we can put together a bunch of things that are in the scope.

[KrosFire]

I don't think I understand what you mean by "modules".

To me in pinia "module" is a store. A specialised store with a bunch of actions. But even if you have like 10 actions per store, file can become pretty huge. It gets hard for new developers to wrap their heads around it and add/modify given actions.

But I believe my approach creates lower entry threshold for developers in a project and is actually very maintainable.

Is there an error in one of the actions? You just go to the file of this action and can focus on just this actions code.

You want to better document your code? There is plenty of space for thorough jsdoc.

If you have hundreds of actions in one pinia store, then I think this means you're doing something wrong and there should be a way to split this store to many smaller ones.

But maybe I'm missing something :)

[kerbilg]

Hi, the discussion is a bit confusing. Is there currently a working (or best) solution?

Thanks! :)

[alexisjamet]

Yes my solution works on a large project in production since months.

[liquidvisual]

It would be helpful if a solution was offered in the official docs.

[exbotanical]

Or if the necessary types / helpers were exposed as part of the actual Pinia package. Granted I haven't read the updates on this issue in, like, a year so I'm unsure whether the current favored solution is feasible.

My point though is I think Pinia should support this pattern natively.

[AlejandroRodarte]

Hello. I will share my solution to this problem, in case anyone finds it helpful. This is taken from a simple to-do application I am currently working on.

Defining the structure of the To-Do object: store/todo/interfaces/todo.interface.ts

export default interface Todo {
  createdAt: Date;
  done: boolean;
  id: string;
  title: string;
  updatedAt: Date;
}

Defining an interface for the state: store/todo/interfaces/todo-state.interface.ts

import Todo from './todo.interface';

export interface TodoState {
  items: Todo[];
}

Creating a utility, mapping type that transforms a getter type interface into one where all values are functions that expect the current state object as argument: types/pinia/pinia-getter-adaptor.type.ts

Made it just for convenience; avoid the redundancy of always typing (state: TodoState) => whatever on each getter key

export type PiniaGetterAdaptor<
  StateType extends Record<string, any>,
  GetterType extends Record<string, any>
> = {
  [GetterKey in keyof GetterType]: (state: StateType) => GetterType[GetterKey];
};

Defining an interface for the getters: store/todo/interfaces/todo-getters.interface.ts

import Todo from './todo.interface';
import { TodoState } from './todo-state.interface';
import { PiniaGetterAdaptor } from '../../../types/pinia/pinia-getter-adaptor.type';

interface TodoBasicGetters {
  getById: (id: string) => Todo | undefined;
  getOrderedTodos: Todo[];
}

export type TodoGetters = PiniaGetterAdaptor<TodoState, TodoBasicGetters>;

Defining an interface for the actions: store/todo/interfaces/todo-actions.interface.ts

interface TodoAdd {
  newTodo: {
    title: string;
  }
}

interface TodoDelete {
  selectedTodo: {
    id: string;
  }
}

interface TodoUpdate {
  selectedTodo: {
    id: string;
  },
  updates: {
    title?: string;
    done?: boolean;
  }
}

export interface TodoActions {
  addTodo(payload: TodoAdd): void;
  deleteTodo(payload: TodoDelete): void;
  updateTodo(payload: TodoUpdate): void;
}

Defining a type for my store module: store/todo/types/todo-store.type.ts

import { Store } from 'pinia';

import { TodoState } from '../interfaces/todo-state.interface';
import { TodoGetters } from '../interfaces/todo-getters.interface';
import { TodoActions } from '../interfaces/todo-actions.interface';

export type TodoStore = Store<'todo', TodoState, TodoGetters, TodoActions>;

Creating a state: store/todo/todo.state.ts

import { TodoState } from './interfaces/todo-state.interface';

const state = (): TodoState => ({
  items: [],
});

export default state;

Creating our getters object: store/todo/todo.getters.ts

import { TodoGetters } from './interfaces/todo-getters.interface';
import { TodoStore } from './types/todo-store.type';

type Getters = TodoGetters & ThisType<TodoStore>;

const getters: Getters = {
  getById(state) {
   // the 'this` keyword will be inferred as of type 'TodoStore'
    return (id) => state.items.find((todo) => todo.id === id);
  },

  getOrderedTodos(state) {
    return state.items.sort(
      (todoA, todoB) =>
        todoA.createdAt.getMilliseconds() - todoB.createdAt.getMilliseconds()
    );
  },
};

export default getters;

Creating our actions object: store/todo/todo.actions.ts

import { v4 as uuid } from 'uuid';

import Todo from './interfaces/todo.interface';
import { TodoActions } from './interfaces/todo-actions.interface';
import { TodoStore } from './types/todo-store.type';

type Actions = TodoActions & ThisType<TodoStore>;

const actions: Actions = {
  addTodo(payload) {
    const newTodo: Todo = {
      id: uuid(),
      title: payload.newTodo.title,
      done: false,
      createdAt: new Date(),
      updatedAt: new Date(),
    };
    this.items.push(newTodo);
  },

  deleteTodo(payload) {
    this.items = this.items.filter(
      (todo) => todo.id !== payload.selectedTodo.id
    );
  },

  updateTodo(payload) {
    this.items = this.items.map((todo) => {
      if (todo.id === payload.selectedTodo.id) {
        return {
          ...todo,
          ...payload.updates,
          updatedAt: new Date(),
        };
      }
      return todo;
    });
  },
};

export default actions;

Everything comes together: defining the store at store/todo/todo.store.ts

import { defineStore } from 'pinia';

import state from './todo.state';
import getters from './todo.getters';
import actions from './todo.actions';

const useTodoStore = defineStore('todo', {
  state,
  // avoid "index signature for type 'string' is missing" error
  // hacky solution; maybe there's a better way?
  getters: { ...getters },
  actions,
});

export default useTodoStore;

Sample test snippet

import { setActivePinia, createPinia } from 'pinia';
import { describe, test, expect, beforeAll, afterAll } from 'vitest';

import useTodoStore from '../../store/todo/todo.store';
import { TodoStore } from '../../store/todo/types/todo-store.type';

let todoStore: TodoStore;

beforeAll(() => {
  // create fresh pinia and make it active so it is picked up
  // by any useStore() call
  setActivePinia(createPinia());
  // no TypeScript errors present here: what useTodoStore()
  // returns matches the 'TodoStore' type
  todoStore = useTodoStore();
});

afterAll(() => {
  todoStore.$reset();
});

describe('useTodoStore', () => {
  test('creates a store', () => {
    const todoStore = useTodoStore();
    expect(todoStore).toBeDefined();
  });
});

I haven't encountered issues so far with this approach, but maybe someone that reads it might point a flaw in it that I can improve on. Thank you in advance for reading.

PS: This is not a suggestion on how to separate files for each store module, but a way to maintain type safety while splitting store-related code. Some developers might prefer to have a fewer amount of files per module, which is completely fine, yet they can utilize this approach to obtain the same end result.

[0x30]

How about using use hooks?

/// other module
const useUserModule = (phoneRef: Ref<string | undefined>) => {
  const formatPhone = computed(() => {
    if (phoneRef.value === undefined) return undefined
    return `${phoneRef.value.slice(0, 3)}****${phoneRef.value.slice(-4)}`
  })

  return { formatPhone }
}

/// action module
const useActions = (phoneRef: Ref<string | undefined>) => {
  const updatePhone = (phone?: string) => {
    phoneRef.value = phone
  }

  return { updatePhone }
}


/// main store

const useUserStore = defineStore('user', () => {
  const userPhoneNoRef = ref<string>()

  /// use modules
  const userModule = useUserModule(userPhoneNoRef)
  const actionModule = useActions(userPhoneNoRef)

  return {
    ...userModule,
    ...actionModule,
  }
})


/// example
const userStore = useUserStore()

userStore.updatePhone('13011112222')
console.log(userStore.formatPhone)

[hokkaido]

So I guess going by the fact that we have a gazillion comments here I assume there is no real solution and this is just yet another indicator that being type-safe is somewhat of an afterthought with Vue. :/