Poll/Discussion: Using module scope reactive variables as stores

[PuritanPilgrim]

Hi,

First of all, I'm not using SSR.

So, I know that having stores is mandatory when scaling up large projects if you don't want a client to end up ultimately buying spaghetti code, but this post is meant to ask for some clarification about the principles of the implementation.

There are currently three (or four) methods of managing state - as I'm aware. I'll list them in order of my own perceived reusability and maintainability:

1. Prop drilling (or "exposition drilling", as I call it - using defineExpose());
2. State management libs (e.g. Pinia);
3. Module scoped refs.

I was wondering why it's generally considered a bad practice to use vanilla Vue refs from JavaScript modules as stores. I've seen posts recommending against using module scoped stores, but why? See https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api for an example.

In my opinion, it is much more intuitive to use a global ref to store data that can be accessed by all components.

While third-party libs like Pinia can be good for SSR, their usage makes me feel like the app is getting cluttered. Also, their overall architecture feels outdated compared to Vue 3's composition API.

Looking forward to see your arguments!