什么是Pinia？Pinia的数据持久化

什么是Pinia？Pinia的数据持久化

引用

CSDN

1.

https://blog.csdn.net/2302_77101581/article/details/138253007

什么是Pinia

Pinia 是 Vue 的最新状态管理工具，是 Vuex 的替代品

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

getters实现

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

action异步实现

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

storeToRefs

用法：storeToRefs(store)
作用：将 pinia 中的 store 对象中的状态转换为具有 .value 的 ref 对象集合。

  
import { useStore } from 'pinia';
import { storeToRefs } from 'pinia';
const store = useStore();
const refs = storeToRefs(store);  

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/counter.js
   import { defineStore } from 'pinia'
   import { computed, ref } from 'vue'
   export const useCounterStore = defineStore('counter', () => {
   ...
   return {
   count,
   doubleCount,
   increment
   }
   }, {
   persist: true
   })

总结：

1. 如何理解 Pinia ?

Pinia 是 Vue.js 的一个状态管理库, 它是作为 Vuex 的一个轻量级替代品而创建的, Pinia 提供了一种简单、直观的方式来管理和访问 Vue 应用的状态。
以下是一些关于 Pinia 的关键点:

1. Pinia 的 API 设计得非常简单, 使得创建和使用 store 变得非常容易。使用 defineStore 函数定义 store, 使用 useStore 函数在组件中使用 store。
2. Pinia 提供了很好的 TypeScript 支持, 这使得你可以在编写代码的时候获得类型提示和类型检查。
3. Pinia 支持 Vue DevTools, 这使得你可以在开发的时候查看和调试你的状态。
4. 与 Vuex 不同, Pinia 不需要你将你的状态分割成多个模块, 每个 Pinia store 都是独立的, 可以直接访问。
5. Pinia 是为 Vue 3 设计的, 它利用了 Vue 3 的新特性, 如 Composition API。
6. Pinia 支持服务器端渲染, 这使得你可以在服务器端预渲染你的 Vue 应用。

2. vuex 和 pinia 之间有哪些区别

Vuex 和 Pinia 都是 Vue.js 的状态管理库, 但它们在设计和使用上有一些区别:

1. 设计理念: Vuex 是 Vue.js 的官方状态管理库, 设计上更偏向于大型应用, 有严格的规则和模式, 如必须通过 mutations 来修改状态。Pinia 则更加灵活, 没有强制的规则, 更适合小型到中型应用。
2. API 设计: Pinia 的 API 设计更加简洁和直观。在 Pinia 中, 你可以直接修改状态, 而不需要通过 mutations。而在 Vuex 中, 你必须通过提交 mutations 来修改状态。
3. 类型支持: Pinia 对 TypeScript 提供了更好的支持。在 Pinia 中, 状态、getters、actions 都有很好的类型推导, 而在 Vuex 中, 由于其 API 设计, 类型推导并不完善。
4. Devtools 支持: Vuex 和 Pinia 都支持 Vue Devtools, 但 Pinia 提供了更好的 Devtools 体验, 如状态快照、时间旅行等功能。
5. 模块系统: Vuex 提供了模块系统, 可以将 store 分割成模块, 每个模块有自己的状态、mutations、actions、getters。Pinia 也提供了类似的功能, 但更加灵活, 每个 pinia store 都是独立的, 可以直接访问和操作。
6. 兼容性: Vuex 可以在 Vue 2 和 Vue 3 中使用, 而 Pinia 只支持 Vue 3。

3. vue3 中使用 Pinia 管理状态的策略

在 Vue3 项目中使用 Pinia 管理状态时，遵循以下最佳策略可以更高效地管理和维护你的状态：

1. 模块化：将状态分割成不同的模块，每个模块对应应用中的一个逻辑区域或功能。这样做可以保持代码的清晰和组织，使得状态管理更加直观。
2. 使用 Actions 进行异步操作：在 Pinia 中，Actions 用于处理异步操作，比如从 API 获取数据。通过将异步逻辑放在 Actions 中，可以保持状态管理流程清晰和一致。
3. 利用Getters进行数据派生：如果你需要根据现有状态计算新的值(例如，根据商品列表计算总价格)，使用 Getters 实现。Getters 是响应式的，当依赖的状态变化时，它们会自动更新。
4. 状态复用：如果中有多个地方需要使用到相同的状态，考虑创建一个共享的状态模块，而不是在每个组件内部单独管理状态。这样可以避免状态的重复和不一致。
5. 类型安全：如果项目中使用了 TypeScript，利用 Pinia 提供的类型支持来定义你的状态、getters 和 actions。这样不仅可以提高代码的可维护性，还可以在编写代码时获得更好的自动完成和错误检查。
6. 避免直接修改状态：在 actions 或者使用状态的组件中，避免直接修改状态值。应该通过定义的方法(actions 或 mutations)来修改状态，这样可以保证状态变化的可追踪性和一致性。
7. 持久化状态：对于需要持久化的状态(例如，用户登录信息)，可以使用插件如 pinia-plugin-persist 来自动保存状态到 localStorage 或 sessionStorage 中，这样即使页面刷新，状态也不会丢失。
8. 开发工具：利用 Vue Devtools 进行调试。Pinia 支持与 Vue Devtools 集成，这可以让你更容易地跟踪状态变化和调试应用。

本文原文来自CSDN