vue3.0学习笔记（五）——Vue3 状态管理 - Pinia

目录

1. 什么是Pinia

2. 手动添加Pinia到Vue项目

3. Pinia基础使用-计数器案例

3.1 vue2.0 状态管理工具 vuex 使用回顾

3.1 vue3.0 状态管理工具 pinia 使用

4. getters实现

5. action异步实现

6. storeToRefs工具函数

7. Pinia的调试

8. Pinia持久化插件

8.1 使用步骤

8.2 常用配置说明 - 更多配置参考官方文档

9. 总结

---

1. 什么是Pinia

• Pinia是Vue的最新状态管理工具，是Vuex的替代品。
• pinia官网：Pinia | The intuitive store for Vue.js

• 提供更加简单的API（去掉了mutation）
• 提供符合，组合式风格的API（和Vue3新语法统一）
• 去掉了modules的概念，每一个store都是一个独立的模块
• 配合TypeScript更加友好，提供可靠的类型推断

2. 手动添加Pinia到Vue项目

在实际开发项目的时候，关于Pinia的配置，可以在项目创建时自动添加

现在我们初次学习，从零开始：

• 使用Vite创建一个空的Vue3项目
  • npm init vite@latest
• 按照官方文档安装 pinia 到项目中

  • yarn add pinia
    # 或者使用 npm
    npm install pinia

3. Pinia基础使用-计数器案例

3.1 vue2.0 状态管理工具 vuex 使用回顾

• 口诀：下载，引入，注册，对象，注入（挂载）

• 详细使用细节：vue学习笔记（十）——Vuex（状态管理，组件间共享数据）