大菠萝🍍你太优秀Pinia 是 Vue3 推荐的状态管理工具，具有简单易用、功能丰富的特点。相较于vuex，Pinia

💭引言

为什么还不放假🤯，趁这个时间写一篇文章记录一下大菠萝🍍

🤔什么是大菠萝🍍

Pinia 是 Vue3 的现代化状态管理库，支持跨组件页面共享状态。

它充分利用了 Vue3 的 Composition API 等新特性，弥补了 Vuex 的复杂性和局限性。

Pinia 的核心是 Store，它类似于 Vuex 模块但更简单。其特性包括：

模块化组织：支持将状态分为多个 Store。

持久化支持：方便地保存应用状态。

插件扩展：允许功能扩展。

左vuex，右pinia⬆️

⚙️安装与设置

安装

通过 npm 安装 Pinia：

npm install pinia

注册 Pinia

在 main.js 文件中注册 Pinia：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

创建 Store

Pinia 提供了两种定义 Store 的方式：

选项式 (Option Store)

组合式 (Setup Store)

选项式 Store

选项式语法类似于 Vuex：

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'VueUser',
    age: 25
  }),
  getters: {
    userInfo: (state) => `${state.name}, Age: ${state.age}`
  },
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
});

组合式 Store

组合式语法更接近 Vue3 的 Composition API：

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  const name = ref('VueUser');
  const age = ref(25);

  function updateName(newName) {
    name.value = newName;
  }

  return { name, age, updateName };
});

使用 Store

在组件中使用 Store：

<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// 访问数据
console.log(userStore.name);

// 修改数据
userStore.updateName('NewUser');
</script>

确保响应式：使用 `storeToRefs`

解构 Store 数据时，推荐使用 storeToRefs 确保响应式：

<script setup>
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();
const { name, age } = storeToRefs(userStore);
</script>

📌核心功能

State

State 用于存储数据：

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null
  })
});

可以直接修改 State：

userStore.currentUser = { name: 'Alice', age: 30 };

或使用 $patch 同时更新多个属性：

userStore.$patch({
  users: [],
  currentUser: { name: 'Bob', age: 25 }
});

Getters

Getters 类似于 Vue 的计算属性：

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'VueUser'
  }),
  getters: {
    greeting: (state) => `Hello, ${state.name}!`
  }
});

使用 Getter：

<template>
  <div>{{ userStore.greeting }}</div>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
</script>

Actions

Actions 用于处理逻辑和异步操作：

export const useUserStore = defineStore('user', {
  actions: {
    async fetchUsers() {
      const response = await fetch('/api/users');
      this.users = await response.json();
    }
  }
});

调用 Action：

<template>
  <button @click="userStore.fetchUsers">Fetch Users</button>
</template>

<script setup>
import { useUserStore } from '@/stores/user';
const userStore = useUserStore();
</script>

数据持久化

如果不想页面刷新后丢失数据就要使用数据持久化。使用插件 pinia-plugin-persistedstate 实现状态持久化。

安装

npm install pinia-plugin-persistedstate

配置插件

在 main.ts 中配置：

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

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

启用持久化

在 Store 中启用持久化：

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'VueUser'
  }),
  persist: true
});

或自定义配置：

persist: {
  key: 'user-store',
  storage: sessionStorage,
  paths: ['name'],
}

结语

相较于vuex，Pinia 在设计和实现上更贴近 Vue 3 的性能优化理念，减少了不必要的开销，因此总体上比Vuex更快🚀。若有不足，欢迎大佬补充❤️

点赞哦~😘

参考戴总爆款文章：大菠萝(pinia)符合真香定律

大菠萝🍍你太优秀

💭引言