Многократное использование store vue pinia?

Question

[Ваня]

Подскажите как правильно сделать, допустим у меня есть store, но я хочу сделать несколько сторов. Как это сделать? Можно сделать 3 одинаковых файла, можно сделать внутри store массив store c методом выбора нужно по ID или Name. не знаю как лучше. Допустим у нас уже есть

import { defineStore } from 'pinia'

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0,
  }),
})

И каждый раз делая

import { useStore } from '@/stores/counter'

export default {
  setup() {
    const store = useStore()

    return {
      store,
    }
  },
}

Я обращаюсь к одному и тому же store. Но я хочу иметь несколько независимых store. Как быть? Единственный способ который я знаю, это

document.querySelectorAll<HTMLElement>('.app').forEach(el => {
    const pinia = createPinia()
    const ap = createApp(App).use(router).use(pinia).mount(el)
})

Но это уже не то, это получается полностью независимые компоненты root.

Comments

[Антон Антон]

сделай функцию, возвращающую объект для создания стора и хоть обсоздавайся одинаковых сторов с помощью defineStore, хоть в массиве, хоть в разных файлах, хоть как

[Ваня]

Антон Антон, можно пример, я не очень понимаю

[Антон Антон]

import { defineStore } from 'pinia'

const storeDefinition = {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
}

export const useCounter1Store = defineStore('counter1', storeDefinition)
export const useCounter2Store = defineStore('counter2', storeDefinition)
export const useCounter3Store = defineStore('counter3', storeDefinition)
export const useCounter4Store = defineStore('counter4', storeDefinition)
export const useCounter5Store = defineStore('counter5', storeDefinition)
export const useCounter6Store = defineStore('counter6', storeDefinition)

[Ваня]

Антон Антон, большое спасибо, пойду проверю)

[Антон Антон]

Сергей, можно вообще накрутить автосоздание по ключу
типа

const stores = {}
export function getCounterStore(key) {
  if (!stores[key]) stores[key] = defineStore(key, storeDefinition)
  return stores[key]()
}

Answer 1

[Антон Антон]

import { defineStore } from 'pinia'

const storeDefinition = {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
}
const stores = {}
export function getCounterStore(key) {
  if (!stores[key]) stores[key] = defineStore(key, storeDefinition)
  return stores[key]()
}

в других файлах

import {getCounterStore} from 'awesome-counter-store.js'

...
const store1 = getCounterStore('key1')
const store2 = getCounterStore('key2')