How do I use Pinia in my Vue 3 application?

How do I use Pinia in my Vue 3 application?

To use Pinia in your Vue 3 application, first install it via npm with npm install pinia. Then, create a Pinia store.

Can you show me how to create a store?

Sure! You can create a store by importing defineStore from Pinia and defining your store like this:

import { defineStore } from 'pinia';

export const useMyStore = defineStore('myStore', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

How do I use this store in a component?

In your component, import the store and call it to access its state and actions:

import { useMyStore } from '@/stores/myStore';

export default {
  setup() {
    const myStore = useMyStore();
    return { myStore };
  }
};

What about using getters?

You can define getters in your store like this:

getters: {
  doubleCount: (state) => state.count * 2
}

Then, access it in your component using myStore.doubleCount.