Using Pinia with @vue/reactivity, without full Vue

[Valian]

First and foremost, thanks for creating Pinia! I'm strongly convinced it's DX Redux and Vuex always wanted to reach 👍

Recently I started working on a canvas-based game. I was able to successfully use Vue composition API without including Vue, thanks to @vue/reactivity and @vue/reactivity/watch packages. It greatly simplified game logic.

I'm wondering if it would be possible to move one step further and use Pinia without including a full Vue package in the build? Reactivity API is useful in a wide range of different applications, not only in Vue projects. From what I understand, Pinia should be mostly dependant on composition API.

I imagine it might be hard to decouple Pinia from Vue enough to require only @vue/reactivity, but in theory, is it possible? There is always a workaround to install both Vue 3 + Pinia and rely on tree-shaking to remove unused parts, just it's obviously not perfect.

(I think @vue/reactivity is distributed both as a standalone package and as a part of vue core, so understanding what is installed might complicate already complex vue-demi usage, but still I'm interested if it's theoretically possible)

[egorFiNE]

I would love that as well. I need pinia at the backend.

[cefn]

This sounds like a really interesting direction, as it means we could potentially write business logic structured around changes to state and fully isolated from rendering. In the react space, this is why I wrote Lauf store See https://github.com/cefn/lauf https://medium.com/codex/dumping-redux-wasnt-so-hard-578a0e0bf946 for some justification.

Experiments with Vue and Lauf have been promising (since Lauf doesn't have any dependency on any rendering framework) (see https://github.com/cefn/lauf-vue-gist/blob/main/src/Counter.vue ) but especially for commercial work I would rather adopt something where the bindings are already maintained for Vue rather than rolling my own.

However, at the same time, embedding business logic within the rendering framework seems a very bad idea and it looks like Pinia can't be used as a standalone state engine from what I can see. I agree that having dependency only on the reactivity framework would be fine (as state changes have to propagate somehow) but embedding it within components seems wrong.

Perhaps it's just that no-one has got around to this thread, and it's easy to do. I'll see what I can prove in draft.

[cefn]

Been experimenting further with Pinia and it's pretty nice when used standalone, once you accept the 'magic' of the vue binding mechanisms that track state changes and trigger event propagation (e.g. watch with a function selector signature that accesses some reactive object).

Although it inevitably relies on vue reactivity, code doesn't have to be within the scope of a Vue component or coupled to any template, so I believe it should be possible to bundle without anything that relies on dom libraries. I am currently authoring and testing state logic in typescript that runs in Jest and Node without any dom libraries in scope (despite its vue dependency).