Composable global store as data fetching pattern in Vue ⇆ performance and memory impact

[askeda]

I've frequently encountered this data fetching pattern in Vue applications and found it convenient initially, but now I view it as an anti-pattern. I'd like to confirm my concerns.

If data like products is used only in one specific page or a smart component there's no need for a global store in the first place. However that's not my primary concern here.

In a large application with 10–50 such composables that each fetch and manage their own data throughout the app, what is the impact on memory usage? I guess this data is not garbage collected when the user navigates away from a page or component unmounts potentially causing the browser's memory usage to creep up over time.

// composable/useProducts.ts

const products = ref([])
const isLoading = ref(false)
  
const useProducts = () => {
  const fetchProducts = async () => {
    try {
      isLoading.value = true
      const response = await fetch('https://api.example.com/products')
      // parsing response and extracting data
      products.value = data
    } catch (error) {
      // generic error handling
    } finally {
      isLoading.value = false
    }
  }

  return { 
    products,
    isLoading,
    fetchProducts 
  }
}

[aniruddhaadak80]

Hi @askeda!

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!