Master Pinia Setup Stores in 30 Minutes with Vue JS 3

In this tutorial, we will walk through the process of setting up stores in Pinia, a state management library for Vue JS 3. By the end of this tutorial, you will have a clear understanding of how to set up stores in Pinia and how to use them in your Vue application.

Step 1: Install Pinia

The first step is to install Pinia in your Vue project. You can do this by running the following command in your terminal:

npm install pinia@next

Step 2: Create a Pinia store

To create a store in Pinia, you need to define a store object using the createStore function. Create a new file called store.js in your project and add the following code:

import { createPinia } from 'pinia'

export const store = createPinia()

Step 3: Register the store in your Vue app

To use the store in your Vue app, you need to register it in the root component. Open your main Vue file (usually main.js or App.vue) and add the following code:

import { createApp } from 'vue'
import App from './App.vue'
import { store } from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

Step 4: Create modules in the store

Now that you have set up the store, you can create modules to organize your state. Modules in Pinia are similar to modules in Vuex. In your store.js file, you can define a module like this:

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

Step 5: Use the store in your components

To use the store in your components, you need to import the useStore function from Pinia and call it with the store module you want to use. For example, to use the counter module we just created, you can do this in a component:

import { defineComponent } from 'vue'
import { useCounterStore } from '@/store'

export default defineComponent({
  setup() {
    const counterStore = useCounterStore()

    return {
      counter: counterStore
    }
  }
})

Step 6: Test the store

You can now test the store in your Vue components by accessing the state and actions defined in the store module. For example, you can display the count value and increment it in a component like this:

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useCounterStore } from '@/store'

export default defineComponent({
  setup() {
    const counterStore = useCounterStore()

    return {
      counter: counterStore
    }
  }
})
</script>

That’s it! You have successfully set up stores in Pinia and used them in your Vue application. Pinia provides a simple and efficient way to manage state in Vue JS 3, making it easier to build scalable and maintainable applications. Happy coding!