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 to deal with two local data sources or should I get rid of pinia and only use dexie ? does the fact that I use two data sources slow my app ? Do you have any suggestions how to optimize this ?

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))