Vue3状态管理之Pinia怎么使用(pinia,vue3,开发技术)

Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本

基于 Vite 的极速构建工具链

<script setup> 带来的开发体验更丝滑的组合式 API 语法

Volar 提供的单文件组件 TypeScript IDE 支持

vue-tsc 提供的针对单文件组件的命令行类型检查和生成

Pinia 提供的更简洁的状态管理

新的开发者工具扩展，同时支持 Vue 2/Vue 3，并且提供一个插件系统来允许社区库自行扩展开发者工具面板。

官方地址：https://pinia.vuejs.org/

Pinia 是 Vuex4 的升级版，也就是 Vuex5

Pinia 极大的简化了Vuex的使用，是 Vue3的新的状态管理工具

Pinia 对 ts的支持更好，性能更优， 体积更小，无 mutations，可用于 Vue2 和 Vue3

Pinia支持Vue Devtools、 模块热更新和服务端渲染

&emsp;&emsp;Vuex 与 Pinia 对比

Vuex 中核心部分： State、Getters、Mutations（同步） 和 Actions（异步）

Pinia 中核心部分： State、Getters 和 Actions(同步异步均支持)

&emsp;&emsp;Pinia 各部分作用

State： 类似于组件中data，用于存储全局状态

Getters： 类似于组件中的computed，根据已有的State封装派生数据，也具有缓存的特性

Actions： 类似于组件中的methods，用于封装业务逻辑，同步异步均可以

&emsp;&emsp;Pinia 官方示例JS版本

① 创建一个vue vite项目

② 安装 pinia，-S是为了将其保存至package.json中，便于Git管理给其他人的使用

PS C:\Users\FORGET\Desktop\vue-pinia-demo\pinia-demo> npm install pinia -S

③ 创建 pinia 实例并挂载到 vue中

④ 在src文件下创建一个store文件夹，并添加index.ts

⑤ 在组件中使用

状态管理中

组件中

一般的修改

通过actions修改

定义

使用

保存至localStorage中

使用 插件 pinia-plugin-persist 可以辅助实现数据持久化功能

其它设置，自定义保存名称，保存位置和需要保存的数据