Pinia Plugin Add state property & getter

[jrean]

Using Nuxt3, following the documentation I was able to add a custom state property foo that is now available for all my stores.

• A) In the plugin how can we add a getter so it is available across the stores (It's documented for adding a state property but I cannot manage to add a getter)

function PiniaPlugin({ store, options }: PiniaPluginContext) {

  // Custom state
  if (!Object.prototype.hasOwnProperty(store.$state, 'foo')) {
    const foo = ref([])
    store.$state.foo = foo
  }
  store.foo = toRef(store.$state, 'foo')

  // Custom getter => A)
  const isFoo = computed(() => (check) => foo.includes(check))
}

export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(PiniaPlugin)
})

• B) Inside a store how can I access the state property that is defined by the plugin? I tried to add a getter in the store and tried to access the state property but: foo is not defined.

export const useTestStore = defineStore('test', () => {
  // Getter => B)
  const baz = computed(() => foo)
  return { baz }
})

[jrean]

I managed to add a getter from the plugin as a "custom property" ; is it the right way?

function PiniaPlugin({ store, options }: PiniaPluginContext) {

  // Custom state
  if (!Object.prototype.hasOwnProperty(store.$state, 'foo')) {
    const foo = ref([])
    store.$state.foo = foo
  }
  store.foo = toRef(store.$state, 'foo')

  // Custom getter => A)
  const isFoo = computed(() => (check) => foo.includes(check))

  // This custom property is the getter and is available across the stores
  return { isFoo }
}

export default defineNuxtPlugin(({ $pinia }) => {
  $pinia.use(PiniaPlugin)
})

My B) question from the previous message remains:

• B) Inside a store how can I access the state property that is defined by the plugin? I tried to add a getter in the store and tried to access the state property but: foo is not defined:

export const useTestStore = defineStore('test', () => {
  // Getter => B)
  const baz = computed(() => foo)
  return { baz }
})