cylc-ui icon indicating copy to clipboard operation
cylc-ui copied to clipboard

Vuex -> Pinia

Open MetRonnie opened this issue 1 year ago • 1 comments

Pinia is now the preferred store for Vue 3 apps.

https://blog.logrocket.com/pinia-vs-vuex/

MetRonnie avatar Apr 18 '23 09:04 MetRonnie

Taken from now-deleted cylc-ui wiki page on Vue 3:

We might be able to use just the reactivity system of Vue instead of a store with Vuex. i.e. we can build our own with Vue's reactivity.

See: https://vueschool.io/articles/vuejs-tutorials/state-management-with-composition-api/

We can achieve the same as Vuex with just Vue 3. Plus, it allows us to have tree-shaking (discard any code that is not used in our store by the current code in a view, for instance), requires less code, is simpler to understand, and it is also more flexible, giving us more options to manipulate the store.

On flexibility, Vuex allows us to store only data. But with Vue 3 and reactive and ref we are exporting objects, so we can also export functions (you cannot store objects with functions in Vuex store). We have modules that are handling the store changes, and also callbacks and delta code that could be hugely simplified.

MetRonnie avatar Jun 30 '23 09:06 MetRonnie