博客站

Pinia 是一个用于 Vue.js 的状态管理库，旨在提供简单、灵活的状态管理方案。它是 Vuex 的轻量级替代品，具有以下特点：

1. 轻量且易用：Pinia 的 API 设计简洁，学习成本低，适合各种规模的 Vue.js 项目。

2. TypeScript 支持：Pinia 完全支持 TypeScript，提供更好的类型推断和开发体验。

3. 模块化：状态存储（Store）是模块化的，每个 Store 独立管理自己的状态、操作和副作用。

4. Devtools 集成：Pinia 与 Vue Devtools 集成，方便调试和状态追踪。

5. 组合式 API：Pinia 支持 Vue 3 的组合式 API，允许在 Store 中使用 ref、computed 等。

6. 插件系统：Pinia 提供插件机制，便于扩展功能。

基本用法

1. 安装：

   npm install pinia
   

2. 创建 Store：

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

3. 在组件中使用：

   import { useCounterStore } from '@/stores/counter';
   
   export default {
     setup() {
       const counterStore = useCounterStore();
   
       return {
         counterStore,
       };
     },
   };
   

总结

Pinia 是一个现代化的状态管理工具，适合 Vue 3 项目，尤其适合需要 TypeScript 支持或偏好简洁 API 的开发者。