Optimizing State Management with Pinia in Nuxt.js

[bchanez]

Hello everyone,

I'm currently working on a Nuxt.js application where I use Pinia for state management. My application involves handling various collections of todos with different filters, and I’m seeking advice on optimizing my current approach.

Current Approach:

Data Fetching and Storing:
In each page/component, I fetch data from the API with specific filters (e.g., todos older than one week, recently finished todos).
The fetched data is then stored in a Pinia store collection.

Data Retrieval:
After storing the data in the Pinia store, I apply filters again in the components to get the relevant todos from the collection.
Example Scenario:

Todos to Do Older than One Week:
Fetch todos with the status "to do" and older than one week from the API.
Store them in the Pinia collection.
Apply filters again in the component to retrieve these todos.

Recently Finished Todos:
Fetch todos with the status "finished" and completed within the last three days from the API.
Store them in the Pinia collection.
Apply filters again in the component to retrieve these todos.

Issue:
This approach seems redundant and feels heavy because I apply the filters twice: once during the fetch and once when retrieving data from the store. I’m looking for a more efficient way to manage this.

Questions:
Is it normal practice to filter data twice (during fetch and retrieval) in state management using Pinia with Nuxt.js?
How can I optimize this process to avoid redundancy and improve performance?

Best regards,
Bastien

[bchanez]

Summary of my conversation with Likonima on Discord
https://discord.com/channels/325477692906536972/1248373498846384200

Dynamic Approach:
Prefer providing data directly via props to keep components dynamic.

API Calls:
Perform data fetches at the page level whenever possible, and use advanced caching mechanisms like Tanstack (caching de Nuxt) to optimize performance.
https://www.youtube.com/watch?v=aQPR0xn-MMk&ab_channel=AlexanderLichter

Minimal Use of Stores:
Minimize the use of stores to avoid unnecessary complexity and reduce bundle size.

Structuring:
Structure applications with data calls at the page level and distribute data via props or provide/inject to avoid cognitive overload and data inconsistencies.