How do I set up a Pinia store in my Vue.js application?

How do I set up a Pinia store in my Vue.js application?

To set up a Pinia store, first install Pinia using npm or yarn. Then, create a store file and define your state, actions, and getters.

Can you show me an example of a store file?

Sure! Here's a simple example:

import { defineStore } from 'pinia';

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

How do I use this store in my components?

You can use the store in your components by importing it and calling the store function. For example:

import { useStore } from './path/to/store';

export default {
  setup() {
    const store = useStore();
    return { store };
  }
};

What if I want to persist the store data?

You can use plugins like pinia-plugin-persistedstate to persist your store data across sessions.