Pinia

Pinia

https://pinia.vuejs.org/

符合直觉的 Vue.js 状态管理库
类型安全、可扩展性以及模块化设计。
甚至让你忘记正在使用的是一个状态库。

• 💡 所见即所得
  与组件类似的 Store。其 API 的设计旨在让你编写出更易组织的 store。

• 🔑 类型安全
  类型可自动推断，即使在 JavaScript 中亦可为你提供自动补全功能！

• ⚙️ 开发工具支持
  不管是 Vue 2 还是 Vue 3，支持 Vue devtools 钩子的 Pinia 都能给你更好的开发体验。

• 🔌 可扩展性
  可通过事务、同步本地存储等方式扩展 Pinia，以响应 store 的变更以及 action。

• 🏗 模块化设计
  可构建多个 Store 并允许你的打包工具自动拆分它们。

• 📦 极致轻量化
  Pinia 大小只有 1kb 左右，你甚至可能忘记它的存在！

Pinia
Pinia是Vue作者维护的另一个状态管理库,其目的是设计一个拥有组合式 API 的 Vue 状态管理库。所以可以说它是几乎完全服务于vue3的。

核心概念
State：存储应用程序的状态

Getters：是 store 的计算属性 (computed）

Actions：类似于vuex中actions和mutations的继承，可以包含任意同步和异步操作。

工作原理
Pinia的工作原理是基于Vue.js的响应式数据模型。它提供了一个全局的存储库（store）来管理应用程序中的状态。每个store都是独立的，并且拥有自己的状态（state）、getter和action。Pinia通过Vue的响应式系统来确保当store中的状态发生变化时，相关的组件能够自动更新。

具体来说，Pinia使用createPinia函数来创建一个Pinia实例，这个实例可以看作是一个全局的store容器。通过调用defineStore函数，开发者可以创建新的store，这些store被自动添加到Pinia实例中。在组件中，开发者可以使用useStore函数（或自定义的store钩子）来获取对应的store实例，并访问其中的状态和方法。

特性
Pinia具有以下几个显著特性：

直观性：Pinia允许开发者像定义Vue组件一样定义store，这使得状态管理变得更加直观和易于理解。

完整的TypeScript支持：Pinia提供了完整的TypeScript支持，使得开发者可以在编写状态管理逻辑时获得更好的类型检查和代码提示。

去除mutations：与Vuex不同，Pinia去除了mutations的概念，只保留了state、getters和actions。这使得状态更新更加直接和简单。

actions支持同步和异步操作：Pinia的actions方法既可以处理同步逻辑，也可以处理异步逻辑，如发送网络请求等。

Vue Devtools支持：Pinia支持Vue Devtools，这是一个浏览器扩展，允许开发者在浏览器中直接查看和调试Vue应用程序的状态。

模块化：Pinia支持将状态划分为不同的模块（store），每个模块对应一个特定的功能或数据领域。这使得状态管理更加清晰和有序。

轻量级：Pinia的体积非常小（只有约1kb），对应用程序的性能影响微乎其微。

适用场景
Pinia主要适用于以下场景：

Vue.js应用程序中的状态管理：Pinia是专门为Vue.js设计的状态管理库，它提供了简单而强大的API来管理应用程序中的状态。

跨组件状态共享：在Vue应用程序中，经常需要在多个组件之间共享状态。Pinia提供了一个集中的位置来存储和管理这些状态，使得跨组件的状态共享变得简单直接。

复杂逻辑处理：对于需要处理复杂逻辑（如用户登录、数据加载等）的应用程序，Pinia的actions方法提供了强大的支持。

模块化开发：对于大型应用程序，Pinia支持将状态划分为不同的模块，这使得代码更加清晰、易于维护和复用。

vue3中使用Pinia
1.安装pinia

yarn add pinia # 或者使用 npm npm install pinia
一键获取完整项目代码
javascript
2.将pinia配置到全局组件中

// main.js
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import { createPinia } from ‘pinia’;

const pinia = createPinia()
const app = createApp(App);

app.use(pinia);

app.mount(‘#app’);
一键获取完整项目代码
javascript

3.在 src/stores 目录下创建一个新的文件，比如 data.js ，来定义你的状态(我比较喜欢叫状态为属性方法数据之类的）。pinia中的actions类似于vuex中的mutations和actions的集成，所以既可以声明同步函数，也可以写异步函数。

// src/store/data.js
import { defineStore } from ‘pinia’;

export const useDataStore = defineStore(‘data’, {
state: () => ({
count: 0,
}),
actions: {
increment () {
this.count++;
},
decrement () {
this.count–;
},
reset () {
this.count = 0;
},
},
});
一键获取完整项目代码
javascript

4.在组件中使用

一键获取完整项目代码
javascript

5.在父组件中引用

一键获取完整项目代码
javascript
测试页面

刚刚子组件使用pinia store 的时候忘了使用computed监听数据，导致count无法响应实时更新。

好了今天的分享就到这里反正pinia＋vue3很好用谁用谁知道，vue2带着你的vuex滚出去（个人使用体验私密马赛）。
————————————————
版权声明：本文为CSDN博主「超绝前端乱学小白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/2301_76607771/article/details/142927648