Nuxt 3 - Pinia Vs useState()

Question

Store (Pinia) Vs UseState

If I am not mistaken, useState can replace any store like Pinia? Given that useState makes ref sharable across all components I have a hard time knowing if I should use a store or a useState ref. For instance, let's say I have a currentUser (firstName, lastName, email) that I fetch from a distant API at page loading. Should I stock this information in a Pinia userStore or in a useState('currentUser')?

What are best practices on this topic?

useState() docs: https://v3.nuxtjs.org/api/composables/use-state

Pinia docs: https://pinia.vuejs.org/core-concepts/

Overlord

Answer 1

This question is pretty much fully explained in the Why should I use Pinia section, I quote:

• Devtools support
  • A timeline to track actions, mutations
  • Stores appear in components where they are used
  • Time travel and easier debugging
• Hot module replacement
  • Modify your stores without reloading your page
  • Keep any existing state while developing
• Plugins: extend Pinia features with plugins
• Proper TypeScript support or autocompletion for JS users
• Server Side Rendering Support

---

Here is a video of Evan You explaining it if you prefer.

Cusec

Which is better in performance? For example, ram usage. – Overlord

@3AhmadReza I'm pretty sure the difference will be meaningless between the two. Overall code of your application should have more impact than deciding which approach to use here. On top of that, even if Pinia is 2% slower, this should not be a deciding factor because you should write code understandable by humans and not optimized by a few ms, otherwise you're probably working at Amazon. – Cusec

I prefer to use useStore() in small project. Medium and large, definitely Pinia. – Aquarius