fix(types): pass custom properties to stores

__tests__/storePlugins.spec.ts

@@ -11,7 +11,21 @@ declare module '../src' {
 }
 
 describe('store plugins', () => {
-  const useStore = defineStore({ id: 'test' })
+  const useStore = defineStore({
+    id: 'test',
+
+    actions: {
+      incrementN() {
+        return this.n++
+      },
+    },
+
+    getters: {
+      doubleN() {
+        return this.n * 2
+      },
+    },
+  })
   it('adds properties to stores', () => {
     const pinia = createPinia()
 
@@ -26,6 +40,8 @@ describe('store plugins', () => {
 
     expect(store.n).toBe(20)
     expect(store.uid).toBeDefined()
+    // @ts-expect-error: n is a number
+    store.n.notExisting
   })
 
   it('can install plugins before installing pinia', () => {
@@ -44,4 +60,33 @@ describe('store plugins', () => {
     expect(store.uid).toBeDefined()
     expect(store.hasApp).toBe(true)
   })
+
+  it('can be used in actions', () => {
+    const pinia = createPinia()
+
+    // must call use after installing the plugin
+    pinia.use(() => {
+      return { n: 20 }
+    })
+
+    mount({ template: 'none' }, { global: { plugins: [pinia] } })
+
+    const store = useStore(pinia)
+
+    expect(store.incrementN()).toBe(20)
+  })
+
+  it('can be used in getters', () => {
+    const pinia = createPinia()
+
+    // must call use after installing the plugin
+    pinia.use(() => {
+      return { n: 20 }
+    })
+
+    mount({ template: 'none' }, { global: { plugins: [pinia] } })
+
+    const store = useStore(pinia)
+    expect(store.doubleN).toBe(40)
+  })
 })

docs/introduction.md

@@ -83,3 +83,5 @@ export const todos = defineStore({
   },
 })
 ```
+
+## Comparison with other

src/index.ts

@@ -3,7 +3,6 @@ export {
   createPinia,
   Pinia,
   PiniaStorePlugin,
-  PiniaCustomProperties,
 } from './rootStore'
 export { defineStore } from './store'
 export {
@@ -12,6 +11,7 @@ export {
   StoreWithGetters,
   StoreWithActions,
   StoreWithState,
+  PiniaCustomProperties,
 } from './types'
 
 // TODO: remove in beta

src/rootStore.ts

@@ -1,6 +1,11 @@
 import { App, InjectionKey, Plugin, Ref, ref, warn } from 'vue'
 import { IS_CLIENT } from './env'
-import { StateTree, StoreWithState, StateDescriptor } from './types'
+import {
+  StateTree,
+  StoreWithState,
+  StateDescriptor,
+  PiniaCustomProperties,
+} from './types'
 
 /**
  * setActivePinia must be called to handle SSR at the top of functions like
@@ -148,8 +153,3 @@ export function createPinia(): Pinia {
 
   return pinia
 }
-
-/**
- * Properties that are added to every store by `pinia.use()`
- */
-export interface PiniaCustomProperties {}

src/store.ts

@@ -10,6 +10,7 @@ import {
   StoreWithActions,
   StateDescriptor,
   Method,
+  PiniaCustomProperties,
 } from './types'
 import {
   getActivePinia,
@@ -18,7 +19,6 @@ import {
   getClientApp,
   piniaSymbol,
   Pinia,
-  PiniaCustomProperties,
 } from './rootStore'
 import { addDevtools } from './devtools'
 import { IS_CLIENT } from './env'
@@ -247,9 +247,16 @@ export function defineStore<
 >(options: {
   id: Id
   state?: () => S
-  getters?: G & ThisType<S & StoreWithGetters<G>>
+  getters?: G & ThisType<S & StoreWithGetters<G> & PiniaCustomProperties>
   // allow actions use other actions
-  actions?: A & ThisType<A & S & StoreWithState<Id, S> & StoreWithGetters<G>>
+  actions?: A &
+    ThisType<
+      A &
+        S &
+        StoreWithState<Id, S> &
+        StoreWithGetters<G> &
+        PiniaCustomProperties
+    >
 }) {
   const { id, state, getters, actions } = options
 

src/types.ts

@@ -136,7 +136,11 @@ export type Store<
   S extends StateTree,
   G,
   A
-> = StoreWithState<Id, S> & S & StoreWithGetters<G> & StoreWithActions<A>
+> = StoreWithState<Id, S> &
+  S &
+  StoreWithGetters<G> &
+  StoreWithActions<A> &
+  PiniaCustomProperties
 
 /**
  * Generic store type
@@ -147,3 +151,8 @@ export type GenericStore = Store<
   Record<string, Method>,
   Record<string, Method>
 >
+
+/**
+ * Properties that are added to every store by `pinia.use()`
+ */
+export interface PiniaCustomProperties {}