For my app I'm using Vue3, pinia for state management, and dexie as indexedDB wrapper.
my app work this way:
on Mount :
data is fetched from dexie and saved in a pinia state.
then in my component , data is rendered from the state directly...
editing data:
as I add or edit my records: my pinia action functions update data directly on dexie db, then it's refetched on the pinia state.
My question is:
is this a good solution for data management or should I get rid of pinia and only use dexie ?
does the fact that I use two data sources slow my app ?
here is an example of my pinia state:
import { defineStore, acceptHMRUpdate } from 'pinia' import type { IPatient } from '~/db/model' import db from '~/db/db' export const usePatientStore = defineStore('patient', () => { const patients = ref<IPatient[]>([]) // Getters const getPatients = computed(() => patients.value) const getPatientById = (id: string) => { const index = patients.value.findIndex((item: IPatient) => item._id === id) return patients.value[index] } const PatientsNames = () => { return patients.value.map((item: IPatient) => item.name) } const getPatientName = (id: string) => { if (id !== '') return patients.value.filter((item: IPatient) => item._id === id).map((i: IPatient) => i.name).toString() else return '' } // Actions async function fetchPatients() { patients.value = await db.table('patients').toArray().then(result => result.filter(el => el.deleted === false)) } function addPatient(payload: IPatient) { db.table('patients').add(JSON.parse(JSON.stringify(payload))) patients.value.push(payload) } function editPatient(payload: IPatient) { payload.updatedAt = Date.now() db.table('patients').update(payload._id, JSON.parse(JSON.stringify(payload))) const index: number = patients.value.findIndex((item: IPatient) => item._id === payload._id) patients.value[index] = payload } function deletePatient(id: string) { db.table('patients').update(id, JSON.parse(JSON.stringify({ deleted: true, updatedAt: Date.now() }))) const index: number = patients.value.findIndex((item: IPatient) => item._id === id) patients.value.splice(index, 1) } return { patients, getPatients, getPatientById, PatientsNames, getPatientName, fetchPatients, addPatient, editPatient, deletePatient, } }) if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdate(usePatientStore, import.meta.hot)) 
Top comments (1)
If you are trying to query your store, maybe you can consider using Pinia ORM to do so?