What are Pinia modules and how do I use them?

What are Pinia modules and how do I use them?

Pinia modules are a way to organize your state management in Vue.js applications. They allow you to create separate stores for different parts of your application, making it easier to manage and scale your state.

Can you give me an example of how to create a Pinia module?

Sure! To create a Pinia module, you can define a new store using the defineStore function. For example:

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0,
  }),
  actions: {
    setName(newName) {
      this.name = newName;
    },
  },
});

How do I use this module in my Vue component?

You can use the module in your Vue component by importing the store and calling it. For example:

import { useUserStore } from '@/stores/user';

export default {
  setup() {
    const userStore = useUserStore();
    userStore.setName('Alice');
    return { userStore };
  },
};

What are the benefits of using Pinia over Vuex?

Pinia is more lightweight and easier to use compared to Vuex. It offers better TypeScript support, a simpler API, and improved performance, making it a great choice for state management in Vue 3.