May be you are already learned about global state and the Vuex store in Vue and Nuxt projects. Is there any other store for Vue3. Yes, Pinia

Pros of Pinia

  • 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

Yet another reason to use Pinia, simple to use.

Setup Pinia store in a Nuxt3 app

A minimal app is required to try Pinia store, let's create a nuxt3 app.

npx nuxi init nuxt3-app

To setup Pinia store add the Nuxt build module configuration, in nuxt-config, may be the yarn installation will already add it for you,lol.

yarn add pinia @pinia/nuxt

The nuxt config will look like this

 // nuxt.config.js export default {   // ... other options   buildModules: [     '@pinia/nuxt',   ], }

Create the store

Go ahead and create store.ts in the src folder. Pinia uses same philosophy of Vuex, the official Vue store. 

 //store.ts import { defineStore, defineStore } from 'pinia'  export const useStore = defineStore('storeId', {   // arrow function recommended for full type inference   state: () => {     return {       // all these properties will have their type inferred automatically       counter: 10,       name: 'Eduardo',       isAdmin: true,     }   },   actions:{      hit(){        this.counter++;      }   },    getters:{     getCount:(state)=>state.counter,     getUser: (state)=> {       state.name     }   } })  if (import.meta.hot) {   import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot)) }

Accessing the state

Accessing the state / getters / actions in a component by using the useStore. Sorry about mutation they are gone for ever.

 //in some component <script> import { useStore } from '@/store' export default {     data() {     return {       store: useStore()     }   }, } </script>

In the template we can use the reactive store to access actions/ getter/ state.

State

A single state can be accessed as follows

 <template>   <v-row justify="center" align="center">     <v-col cols="12" sm="8" md="6">       <v-card class="logo py-4 d-flex justify-center">       {{store.name}} ......

Getters

Getters are functions which return the read only state for stores, which can be also accessed with store object and insert in template with my favorite double mustache.

 <template>   <v-row justify="center" align="center">     <v-col cols="12" sm="8" md="6">       <v-card class="logo py-4 d-flex justify-center"> {{store.getCount}} ......

Actions

Actions are for making something happen, like increasing a count, or validating a user etc.

 <v-btn @click="store.hit()">Hit me</v-btn>

Directly changing the state ?

Use the $state property to create/ replace a new state 

 store.$state = { counter: 666, name: 'Paimon' }

Wanna empty state, use the following

 pinia.state.value = {}
This free site is ad-supported. Learn more
​