ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【前端学习笔记】Pinia [打印本页]
作者: 王國慶    时间: 3 天前
标题: 【前端学习笔记】Pinia
1.先容

Pinia 是 Vue 3 中的官方状态管理库，作为 Vuex 的继任者，它为 Vue 3 提供了一个更现代、更灵活、更易用的状态管理解决方案。Pinia 重要用于管理应用中的全局状态，并提供了一个清晰、简便的 API 来处理复杂的状态逻辑、数据流和副作用。
Pinia 与 Vuex 相比，具有更简便的 API、更好的 TypeScript 支持、更强的模块化和灵活性。下面是对 Pinia 的具体解读，包罗其核心概念、如何使用以及它的一些优势。

2.使用

Pinia 是 Vue 3 中的官方状态管理库，作为 Vuex 的继任者，它为 Vue 3 提供了一个更现代、更灵活、更易用的状态管理解决方案。Pinia 重要用于管理应用中的全局状态，并提供了一个清晰、简便的 API 来处理复杂的状态逻辑、数据流和副作用。
Pinia 与 Vuex 相比，具有更简便的 API、更好的 TypeScript 支持、更强的模块化和灵活性。下面是对 Pinia 的具体解读，包罗其核心概念、如何使用以及它的一些优势。
1. 为什么使用 Pinia？

在 Vue 3 中，Pinia 是为了替代 Vuex 作为更现代、更轻量级的状态管理解决方案。其设计哲学是简便、灵活、易用，适用于 Vue 3 的 Composition API。相较于 Vuex，Pinia 具有以下优势：

2. Pinia 核心概念

Pinia 重要有三个核心概念：
3. 如何使用 Pinia？

起首，在你的 Vue 3 项目中创建一个 Pinia 实例，然后将其传递给 Vue 实例。一般来说，这个步骤会在 main.ts 或 main.js 中完成。
  1. // main.ts
  2. import { createApp } from 'vue'
  3. import { createPinia } from 'pinia'
  4. import App from './App.vue'
  6. const app = createApp(App)
  8. // 创建并注册 Pinia 实例
  9. const pinia = createPinia()
  11. app.use(pinia)
  12. app.mount('#app')
复制代码
在 Pinia 中，每个 store 是通过 defineStore 函数定义的，它接收两个参数：

  1. // stores/counter.js
  2. import { defineStore } from 'pinia'
  4. export const useCounterStore = defineStore('counter', {
  5.   state: () => {
  6.     return {
  7.       count: 0
  8.     }
  9.   },
  10.   actions: {
  11.     increment() {
  12.       this.count++
  13.     },
  14.     decrement() {
  15.       this.count--
  16.     }
  17.   },
  18.   getters: {
  19.     doubleCount: (state) => state.count * 2
  20.   }
  21. })
复制代码
在上面的代码中，useCounterStore 是一个 store，它包罗：

3.4 使用 Store

在组件中，你可以使用 useCounterStore 来访问和修改 store 中的状态。
  1. <template>
  2.   <div>
  3.     <p>Count: {{ counter.count }}</p>
  4.     <p>Double Count: {{ counter.doubleCount }}</p>
  5.     <button @click="counter.increment">Increment</button>
  6.     <button @click="counter.decrement">Decrement</button>
  7.   </div>
  8. </template>
  10. <script setup>
  11. import { useCounterStore } from './stores/counter'
  13. // 使用 Pinia store
  14. const counter = useCounterStore()
  15. </script>
复制代码
通过 useCounterStore()，你可以访问 store 中的状态、actions 和 getters。在模板中，直接访问 counter.count 或 counter.doubleCount 就能表现当前的状态。
Store 的模块化

Pinia 支持将 store 划分为多个模块，每个模块可以包罗差别的 state、actions 和 getters，类似于 Vuex 的模块化设计。你可以根据功能模块来组织 store。
比方，你可以在 stores 目次下创建多个文件，分别定义差别的 store。
  1. // stores/user.js
  2. import { defineStore } from 'pinia'
  4. export const useUserStore = defineStore('user', {
  5.   state: () => ({
  6.     name: 'John Doe',
  7.     age: 30
  8.   }),
  9.   actions: {
  10.     updateName(newName) {
  11.       this.name = newName
  12.     }
  13.   }
  14. })
复制代码
在 App.vue 中，你可以像使用其他 store 一样使用差别的 store。
  1. import { useUserStore } from './stores/user'
  3. const user = useUserStore()
  4. console.log(user.name)  // 'John Doe'
  5. user.updateName('Jane Doe')
复制代码
4. Pinia 与 Vuex 的对比

特性PiniaVuex支持 Vue 3原生支持，专为 Vue 3 设计也支持 Vue 3，但必要额外的配置和适配API 简便使用 defineStore 定义 store，简便明确必要 state、mutations、actions、gettersTypeScript 支持原生支持 TypeScript，类型推导更好支持，但不如 Pinia 高效和简朴模块化本身支持模块化，每个 store 可以独立必要使用 modules 配置来实现模块化响应式系统使用 Vue 3 的响应式系统，性能更高使用 Vue 2 的响应式系统，性能稍逊插件生态由于是 Vue 官方推荐，插件徐徐增多插件生态成熟，支持许多功能存储方式store 通过 defineStore 天生，主动响应store 是通过 Vuex 实例创建，配置较多 5. Pinia 的优势


Vuex 的 mutations 与 Pinia 的设计差别

在 Vuex 中，mutations 是修改状态（state）的唯一方式。它被设计成 同步 的函数，负责直接修改 Vuex store 中的 state。这种做法有两个重要原因：
而 Pinia 的设计没有 mutations，它允许直接在 actions 中修改状态，简化了代码结构并提拔了灵活性。以下是两者的比较及其优缺点。
为什么 Vuex 必要 mutations？

Pinia 为什么不必要 mutations？


假如你正在开发一个复杂的、必要严酷控制状态管理的大型项目，Vuex 大概会更适合。假如你的项目相对较小，或者是使用 Vue 3 的 Composition API，Pinia 将是一个更轻量、更现代的选择。
恒久化存储

正常情况下，不刷新浏览器时，store 中的状态和路由会保持稳定：

为了制止刷新浏览器后丢失状态，可以使用 恒久化存储（如 localStorage 或 sessionStorage），将紧张的状态保存到浏览器的存储中。这样，在刷新页面后，应用可以从恒久化存储中恢复之前的状态。pinia-plugin-persistedstate
  1. import { defineStore } from 'pinia';
  3. export const useStore = defineStore('store', {
  4.   state: () => ({
  5.     count: 0
  6.   }),
  7.   persist: true  // 启用持久化
  9. //或者
  10.   persist: {
  11.     storage: sessionStorage  // 默认是 localStorage
  12.   }
  13. });
复制代码
  1. import { createPinia } from 'pinia'
  2. import persistedstate from 'pinia-plugin-persistedstate'
  4. const pinia = createPinia()
  5. pinia.use(persistedstate)  // 启用持久化插件
  7. app.use(pinia)
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4