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（状态管理，组件间共享数据）

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

① 定义store

• 口诀：下载，引入，实例，对象，使用（注册/注入）

• const 仓库对象 = defineStore(仓库名字（唯一标识）, () => { state, mutations, actions, getters })

• 仓库对象 useCounterStore 命名规范，use开头-仓库名-Store结尾

• 第一个参数为仓库名字，要求是一个独一无二的名字（唯一标识）

• 第二个参数为函数，该函数定义了一些响应式属性和方法，并且返回（return）一个带有我们想暴露出去的属性和方法的对象。

• state 数据直接申明使用

• 申明 mutations 和 actions，使用普通函数形式申明， mutations 和 actions合二为一

• 申明 getters，基于数据的派生计算属性 computed

②  组件使用store

4. getters实现

Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用 需要把 getters return出去

5. action异步实现

编写方式：异步action函数的写法和 组件中获取异步数据的写法完全一致

接口地址：http://geek.itheima.net/v1_0/channels

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

6. storeToRefs工具函数

使用storeToRefs函数可以辅助保持数据 （state + getter） 的响应式解构

原因： counterStore 以及所有的 store 都是一个用 reactive 包装的对象

要想不丢失响应式，使用 StoretoRef 函数

7. Pinia的调试

Vue官方的 dev-tools 调试工具 对 Pinia直接支持，可以直接进行调试。

vue 官方调试工具版本更新和安装问题： vue3.0学习笔记（一）——vue3简介与vite脚手架的使用

8. Pinia持久化插件

8.1 使用步骤

• 数据持久化?
  • 黑马头条vue2.0项目实战（五）——首页—频道编辑，频道数据持久化功能实现。
• 官方文档：快速开始 | pinia-plugin-persistedstate

使用步骤：

• 安装插件 pinia-plugin-persistedstate
  • npm i pinia-plugin-persistedstate
• main.js 使用

• store仓库中，persist: true 开启

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

该插件的默认配置如下:

• 使用 localStorage 进行存储
• store.$id 作为 storage 默认的 key
• 使用 JSON.stringify/JSON.parse 进行序列化/反序列化
• 整个 state 默认将被持久化

如何你不想使用默认的配置，那么你可以将一个对象传递给 Store 的 persist 属性来配置持久化。

• key

• paths

9. 总结

• Pinia是用来做什么的？
  • 新一代的状态管理工具，替代vuex
• Pinia中还需要mutation吗？
  • 不需要，action 既支持同步也支持异步
• Pinia如何实现getter？
  • computed计算属性函数
• Pinia产生的Store如何解构赋值数据保持响应式？
  • storeToRefs
• Pinia 如何快速实现持久化？
  • pinia-plugin-persistedstate