What are Vue.js Pinia plugins and how do I use them?

What are Vue.js Pinia plugins and how do I use them?

Vue.js Pinia plugins are extensions that enhance the functionality of your Pinia store. They allow you to add features like state persistence, logging, or even custom actions.

Can you give me an example of a simple Pinia plugin?

Sure! Here's a simple plugin that logs every action dispatched to the store:

const loggerPlugin = (store) => {
  store.$onAction(({ name }) => {
    console.log(`Action dispatched: ${name}`);
  });
};

You can register this plugin when creating your store.

How do I register a plugin with my Pinia store?

You can register a plugin by passing it as an argument to the createPinia function like this:

import { createPinia } from 'pinia';
import loggerPlugin from './loggerPlugin';

const pinia = createPinia();
pinia.use(loggerPlugin);

Are there any built-in plugins in Pinia?

Yes, Pinia comes with a built-in plugin for state persistence called pinia-plugin-persistedstate. It helps you save your store's state to local storage.