How to create multiple same stores without duplicating its code?

[igolka97]

I need to create three the same stores but with different names like this:

export const useCountryStore = defineStore('country', { /* options goes hire */ })
export const useRegionStore = defineStore('region', { /* options goes hire */ })
export const useCityStore = defineStore('city', { /* options goes hire */ })

and I want to extract options to one single place to avoid code duplication. What is the proper way to do this?

[posva]

create one object and copy it, just like regular js:

const options = {}
defineStore('one', {...options})
defineStore('two', {...options})

[igolka97]

Yeah, of course I already tried it way, but TS can't find this object in actions while mutating state

[posva]

then create a function that returns the return of defineStore:

function createUseStore<Id extends string>(id: Id) {
  return defineStore(id, {
    // ...
  })
}

[igolka97]

Yes, this is exactly what I need. Thanks!

[Jalliuz]

I also posted the full solution on stackoverflow.com:
https://stackoverflow.com/a/78345448/5418514

It comes down to this:

const myStore = () => { // your store options }

export const useMyStore = (uniqueStoreName) => {
  let store = defineStore(uniqueStoreName, myStore)
  return new store()
}

export default useMyStore

And then in the component:

<template></template>
<script setup>
import useMyStore from '~/stores/myStore'
const myStore = useMyStore('a-unique-name')
</script>

If you do want to share the same store somewhere, you just use the same id's, otherwise a unique id

[AvWoN]

Hello @Jalliuz . Could you explain the purpose of new in return new store() instead of just returning defineStore()?

[kevinramharak]

defineStore returns a factory function to create a new store.
By invoking the returned factory function the code immediately creates a store and returns it.
Using the new here is odd, and will work because any function can be invoked with the new operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.

I would definitely recommend not doing that though, it is not how the factory function is intended to be called.