Comparison of Vuex and Pinia

• Vuex Vuex is the state management library officially provided by Vue.js, mainly used in Vue 2.x and Vue 3.x. The design concept of Vuex is to centrally manage the state of the application through the "Store" and change the state through Actions and Mutations.

• Pinia Pinia is also an officially maintained project. As the state management library for Vue 3, it provides a way to manage the global state of the application based on the Composition API. Its design philosophy is to modularize state management into multiple stores, each representing an independent state and methods. Pinia offers better TypeScript support, a concise API, and more efficient performance.

How to Create and Use Pinia Store

// store.js
import { defineStore } from 'pinia';

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


// Using in a component
<template>
  <button @click="counter.increment">Increment</button>
  <p>{{ counter.count }}</p>
</template>

<script setup>
import { useCounterStore } from './store';

const counter = useCounterStore();
</script>

How Pinia Handles State Persistence

Pinia supports state persistence through plugins. You can use the pinia-plugin-persistedstate plugin to persist store state, keeping it across page refreshes.

After importing the plugin, set the persist property of the state instance to true.

Using Getters to Derive State

// store.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubledCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++;
    },
  },
});

How to Implement Modular State Management with Pinia

Pinia inherently supports multiple stores, each being independent, making it easy to achieve modularization. Each store can have its own state, actions, getters, and persist configuration.

How Pinia Supports Asynchronous Operations

Pinia supports asynchronous operations in actions. Since Pinia does not distinguish between mutations and actions, you can directly use asynchronous operations in actions.

// store.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
  }),
  actions: {
    async fetchUserInfo() {
      const response = await fetch('/api/user');
      this.userInfo = await response.json();
    },
  },
});

<template>
  <button @click="fetchUserInfo">Load User Info</button>
  <p>{{ userInfo }}</p>
</template>

<script setup>
import { useUserStore } from './store';

const userStore = useUserStore();
const fetchUserInfo = userStore.fetchUserInfo;
</script>

How Pinia Handles Reactive State

Pinia uses Vue 3's reactivity system (reactive and ref) to handle state. When you define state in a store, it automatically becomes reactive and can be directly bound and used in components.

How to Use Plugins in Pinia

Pinia supports a plugin mechanism and can load plugins using the use() method.

import { createPinia } from 'pinia';
import piniaPersist from 'pinia-plugin-persistedstate';

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

Difference Between createPinia and defineStore

• createPinia is used to create a Pinia instance, usually called in the entry file of the application. It is the container for the entire Pinia state management. This instance contains all the stores and methods to manage them.

• defineStore is used to define a store, which is the basic unit of state management, responsible for defining specific states, actions, and computed properties.

You need to call createPinia to create a Pinia instance first, and then define the multiple stores you need through defineStore.