What is the best pattern for this Vue/Pinia scenario?

[pedrodruviaro]

I am using Firebase with Vue 3 and Pinia. Inside the store, I have all CRUD functions, as well as task and filter states. In the task creation and fetching of all tasks functions, I am using a loading state within the store. For editing and deleting, I created the function and handled errors and loading within the component, as I needed to access the "isLoading" locally to disable the button. Is this the best approach? I'm unsure about these issues involving error handling and loading states.

TaskItem component:

async function handleDelete() {
  try {
    isLoading.value = true

    await tasksStore.deleteTask(props.task.id)
  } catch (error) {
    toast.error('Algo deu errado ao apagar a tarefa. Tente novamente mais tarde')
  } finally {
    isLoading.value = false
  }
}

Tasks store:

  async function deleteTask(taskId) {
    await deleteDoc(doc(db, 'tasks', taskId))
  }

Store: https://github.com/pedrodruviaro/tasks-tracker-vue-firebase/blob/main/src/components/tasks/TaskItem.vue

[marcosgomesneto]

In your TaskItem.vue component, I don't see any issues with the code initially. If you want to handle the error in a more detailed way, you can examine the error code:

catch(error) {
  switch (error.code) {
    case 'permission-denied':
      toast.error('Permission denied, contact support...');
      break;
    case 'unauthenticated':
      //....
      break;
    case 'not-found':
      //....
      break;
    // Add more cases as needed
    default:
      //....
  }
}

For more error codes, refer to:
Firebase Doc

I also noticed that in your 'task.js' Store, you are placing the database logic, which I don't consider a good practice to have Firebase functions within the state manager. I prefer placing them in a separate data layer, where you would handle all the logic for queries, deleteDoc, addDoc, etc. This approach keeps the Store code cleaner and adheres to the single responsibility principle. The Store would then only call the method responsible for communicating with the data/infrastructure layer. However, this is just a suggestion, and it depends on your project. If it's small, you might not want to make it too complex. Still, I recommend following these best practices.