Vue3-Pinia
什么是Pinia
●介绍
○Pinia 是 Vue 的最新状态管理工具，是 Vuex 的替代品。○
优势
○提供更加简单的 API（去掉了 mutation）。
○提供符合组合式风格的 API，与 Vue3 新语法统一。
○去掉了 modules 的概念，每一个 store 都是一个独立的模块。
○配合 TypeScript 更加友好，提供可靠的类型推断。
○手动添加 Pinia 到 Vue 项目
○在实际开发项目的时候，关于 Pinia 的配置，可以在项目创建时自动添加。
○手动添加的步骤：
i.使用 Vite 创建一个 Vue3 项目：npm create vue@latest
ii.按照官方文档安装 pinia 到项目中。
0.基本使用
○声明数据(state)
■ref：const count = ref(100)
■声明操作数据的方法(action)
■function：const addCount = () => count.value++
■声明基于数据派生的计算属性(getters)
■computed：const double = computed(() => count.value * 2)
■Pinia 中的 action 支持异步操作。
■Pinia 产生的 store 解构赋值数据保持响应式：需要使用 storeToRefs 包裹。
■持久化
○Pinia 持久化插件
■官网：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
■步骤：
1.安装 pinia-plugin-persistedstate 插件：npm i pinia-plugin-persistedstate。
2.main.js 使用：
import persist from 'pinia-plugin-persistedstate'
...
app.use(createPinia().use(persist))3.store 仓库中，persist: true 开启自动持久化。
VueX和Pinia的区别
-
与 Vue 3 的集成：
- Pinia：专为 Vue 3 设计，完全利用了 Vue 3 的 Composition API。
- Vuex：最初为 Vue 2 设计，但也兼容 Vue 3，但它的许多概念和模式更贴近 Vue 2 的选项 API。
-
API 设计：
- Pinia：提供了一个更简洁和直观的 API，减少了样板代码，更符合组合式 API 的风格。
- Vuex：具有更复杂的 API，包括
state、getters、mutations和actions等概念，这在 Vue 2 中很常见，但在 Vue 3 中可能显得有些冗余。
-
插件和工具：
- Pinia：内置了对 Vue Devtools 的支持，并且通过插件系统可以轻松扩展功能。
- Vuex：同样支持 Vue Devtools，但它的插件系统和中间件机制更为复杂。
-
类型推断：
- Pinia：与 TypeScript 集成得更好，提供了更好的类型推断和类型定义。
- Vuex：虽然也支持 TypeScript，但在类型推断方面可能不如 Pinia 直观。
-
响应式系统：
- Pinia：使用 Vue 3 的响应式系统，状态更新是响应式的，并且与 Vue 的响应式系统紧密集成。
- Vuex：使用自己的响应式系统，这可能导致在某些情况下与 Vue 的响应式系统存在差异。
-
模块化：
- Pinia：支持模块化，允许你将状态分割成多个存储（stores），每个存储可以独立管理自己的状态。
- Vuex：也支持模块化，但在模块间的通信和状态管理方面可能不如 Pinia 灵活。
-
性能：
- Pinia：由于其轻量级的设计，通常具有更好的性能，尤其是在大型应用中。
- Vuex：在某些情况下，由于其更复杂的内部结构，性能可能略逊一筹。
为什么Pinia需要持久化?
-
跨会话状态保持： 用户关闭浏览器后再次打开，应用的状态可以恢复到上次使用的状态，而不是从头开始，这可以提升用户体验。
-
离线可用性： 对于支持离线工作的应用程序，持久化的状态可以在没有网络连接的情况下使用。
-
复杂应用的状态管理： 在具有复杂状态逻辑的大型应用中，用户可能不希望在每次页面刷新时都重新配置应用状态。
-
提升性能： 对于初始化状态需要大量计算或API调用的应用，从持久化存储中恢复状态可以减少初始化时间。
-
多设备同步： 如果用户的应用程序在多个设备上运行，持久化状态可以帮助在不同设备间同步状态。
-
用户期望： 现代web应用的用户通常期望应用具有类似本地应用的体验，包括记住他们之前的使用状态。
Pinia 作为一个状态管理库，本身并不提供持久化功能，但可以通过插件或第三方库来实现。例如，你可以使用 pinia-plugin-persist 插件来自动持久化 Pinia 状态。持久化可以通过 localStorage、sessionStorage、IndexedDB 或服务器端数据库等方式实现。