Как динамически подключать нужный store из Pinia при смене страницы vue-router?

Question

[Владимир]

Есть приложение, у которого много однотипных страниц (на всех страницах один и тот же шаблон с таблицей и фильтрами). Данные для конкретной страницы берутся из разных store из Pinia. Решил сделать для этих страниц один универсальный компонент, но не понимаю, как подключать нужный store в зависимости от пути. Сами store построены по одинаковому принципу, у всех есть data, filters, isLoading, fetchData.

Пример компонента страницы:

<template>
	<div :class="{ 'is-loading': isBusy }">
		<Filter :filters="tableFilters" />
		<Table :data="tableData" />
	</div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()

const tableData = ref<unknown[]>()
const tableFilters = ref<unknown[]>()
const isBusy = ref<boolean>(false)

watch(route, () => {
	const { storeId } = route.meta
	if (storeId) {
                 // Не понятно, как реализовать эту функцию
		const { data, filters, isLoading, fetchData } = useStoreById(storeId)

		tableData.value = data
		tableFilters.value = filters
		isBusy.value = isLoading
		fetchData()
	}

}, { immediate: true })

</script>

Настройки для роутера выглядят так (для примера тут всего 2 пути, но в реальном приложении их больше). В поле meta маршрутов прописываю storeId, чтобы понимать, какой store подключить на этой странице.

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/components/Layout.vue'

export default createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/books',
      component: Layout,
      meta: {
        storeId: 'books'
      }
    },
    {
      path: '/persons',
      components: Layout,
      meta: {
        storeId: 'persons'
      }
    }
  ]
}

Answer 1

[modelair]

Почему бы вам просто не индексировать все stores?

export const useStoreUi = defineStore('ui', {...})
const  stores = {
   ui: useStoreUi
}
export default stores

и обращаться уже по ключу как вы хотите

Comments

[Владимир]

Так и сделал. Спасибо за ответ)