Pinia(状态管理)
- 什么是 Pinia
- Pinia 适用于 Vue 2 和 Vue 3 ,除非安装方式和 SSR 之外,两者的 API 都是相同的。适用于 Composition API (组合式 API)和 Options API(选项式 API)。
- Pinia 入门安装
- 一个 Store (如 Pinia)是一个实体,它持有未绑定到您的组件树的状态和业务逻辑。换句话说,它托管全局状态。它有点像一个始终存在并且每个人都可以读取和写入的组件。它包含三个概念:state、getter 和 action,并且可以安全地假设这些概念,等同于在组件中 data、computed 和 methods。
- defineStore
- defineStore() 定义 store 储存。第一个参数是唯一的名称。第二个参数,是 Setup 函数或 Options 对象。
- state
- 在 Pinia 中,state 被定义为返回初始状态的函数。默认情况下,您可以通过 store 实例,访问 state 实例来,直接读取和写入状态。
- getters
- Getter 完全等同于 Store 状态的计算值。具备缓存功能。它们可以用 defineStore() 中的 getters 属性定义。
- actions
- Actions 相当于组件中的方法。它们非常适合定义业务逻辑。action 通过完全输入(和自动完成)来支持访问整个 store 实例。与 getter 不同,它可以是异步的。
- Plugins(插件)
- 通过pinia.use(),把插件添加到 Pinia 实例中。Pinia 插件是一个函数,可以选择返回要添加到 store 的属性。它需要一个可选参数context
- 在组件之外使用 Store
- Pinia Store 依靠 Pinia 实例在所有调用中共享同一个 store 实例。大多数情况下,只需调用useStore()函数,即可开箱即用。例如,在setup()中,您无需执行任何其他操作。但在组件之外,情况有些不同。在幕后,useStore()将提供给应用程序的 Pinia 实例注入。这意味着如果 pinia 无法自动注入实例,则必须手动将其提供给useStore()函数。
- 在非 setup 中使用 Pinia
- 在 vue 组合式 API 中,使用 Pinia,需要注意几个功能:mapStores、mapState、mapWritableState、mapGetters、mapActions。
- 组合 Store
- 组合式 Store 是指让 Store 相互使用,这在 Pinia 中得到了支持。如果一个 Store 使用另一个 Store,假设名称useUserStore,您可以直接import它,然后useUserStore(),再然后在actions或getters中,使用它。
- 组合式函数
- 组合式函数是利用 Vue Composition API 封装和重用state逻辑的函数。无论您是自己编写,还是使用外部库,或者两者兼而有之,您都可以在您的 Pinia 中,充分利用组合处理的强大功能。
- Pinia 与 服务器端渲染(SSR)
- 对于 SSR 来说,使用 Pinia Store 应该是开箱即用的,只要您在setup()、getter和actions内的顶部,调用useStore()函数
- Pinia 与 服务器端渲染 Nuxt.js 框架
- 将 Pinia 与 Nuxt.js 一起使用更容易,因为 Nuxt 在服务器端渲染方面处理了很多事情。例如,您不需要关心序列化或 XSS 攻击。Pinia 支持 Nuxt Bridge 和 Nuxt 3。
- Pinia Store 测试
- 按照设计,Store 将在许多地方使用,并且会使测试变得比应有的困难得多。幸运的是,情况并非如此。我们在测试 store 时需要注意三件事:实例:没有它,piniaStore 就无法运作。actions:大多数时候,它们包含了我们Store 最复杂的逻辑。如果他们默认被嘲笑不是很好吗?Plugins:如果你依赖插件,你也必须安装它们进行测试。
- Pinia 热更新
- Pinia 支持热更新,所以你可以编辑你的 store,并直接在你的应用中与它们互动,而不需要重新加载页面