编程实战教程15_Vue全家桶 - Pinia状态管理.pdf

Vue全家桶–Pinia状态管理

王红元coderwhy

目录

1Pinia和Vuex的对比

content

2创建Pinia的Store

3Pinia核心概念State

4Pinia核心概念Getters

5Pinia核心概念Actions

coderwhy什么是Pinia呢？

◼Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；

Pinia开始于大概2019年，最初是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API（CompositionAPI）。

从那时到现在，最初的设计原则依然是相同的，并且目前同时兼容Vue2、Vue3，也并不要求你使用CompositionAPI；

Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）；

coderwhyPinia和Vuex的区别

◼那么我们不是已经有Vuex了吗？为什么还要用Pinia呢？

Pinia最初是为了探索Vuex的下一次迭代会是什么样子，结合了Vuex5核心团队讨论中的许多想法；

最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex；

与Vuex相比，Pinia提供了一个更简单的API，具有更少的仪式，提供了Composition-API风格的API；

最重要的是，在与TypeScript一起使用时具有可靠的类型推断支持；

◼和Vuex相比，Pinia有很多的优势：

比如mutations不再存在：

✓他们经常被认为是非常冗长；

✓他们最初带来了devtools集成，但这不再是问题；

更友好的TypeScript支持，Vuex之前对TS的支持很不友好；

不再有modules的嵌套结构：

✓你可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的；

也不再有命名空间的概念，不需要记住它们的复杂关系；

coderwhy如何使用Pinia？

◼使用Pinia之前，我们需要先对其进行安装：

◼创建一个pinia并且将其传递给应用程序：

coderwhy认识Store

◼什么是Store？

一个Store（如Pinia）是一个实体，它会持有为绑定到你组件树的状态和业务逻辑，也就是保存了全局的状态；

它有点像始终存在，并且每个人都可以读取和写入的组件；

你可以在你的应用程序中定义任意数量的Store来管理你的状态；

◼Store有三个核心概念：

state、getters、actions；

等同于组件的data、computed、methods；

一旦store被实例化，你就可以直接在store上访问state、getters和actions中定义的任何属性；

coderwhy定义一个Store

◼定义一个Store：

我们需要知道Store是使用defineStore()定义的，

并且它需要一个唯一名称，作为第一个参数传递；

◼这个name，也称为id，是必要的，Pinia使用它来将store连接到devtools。

◼返回的函数统一使用useX作为命名方案，这是约定的规范；

coderwhy使用定义的Store

◼Store在它被使用之前是不会创建的，我们可以通过调用use函数来使用Store：

◼注意Store获取到后不能被解构，那么会失去响应式：

为了从Store中提取属性同时保持其响应式，您需要使用storeToRe