Pinia 是一个基于 Vue 3 的状态管理插件，旨在提供一种简单、直观的方式来管理应用程序的状态。与其他状态管理库（如 Vuex）相比，Pinia 更加轻量级、易于使用和可扩展。
Pinia 的主要特点包括：
1. 面向对象的 API：通过使用类来定义状态和操作，可以更加清晰地组织应用程序的状态逻辑。
2. 支持 TypeScript：Pinia 提供了完整的 TypeScript 支持，使得类型检查和编辑器提示更加友好。
3. 插件系统：Pinia 提供了一种简单的方式来扩展其功能，例如在状态变化时触发钩子、在存储中使用加密等等。
4. 懒加载：Pinia 可以根据需要动态地加载状态，使得应用程序的初始加载速度更快。
Pinia 的使用也非常简单，只需要在应用程序中实例化一个 Pinia 实例，并在组件中使用 `useStore` 函数来访问应用程序的状态。以下是一个简单的示例：
javascript
import { createPinia, defineStore } from 'pinia' const pinia = createPinia() const counterStore = defineStore({ id: 'counter', state: () => ({ count: 0, }), actions: { increment() { this.count++ }, }, }) export default { setup() { const counter = useStore(counterStore) return { count: counter.count, increment: counter.increment, } }, }
在这个示例中，我们首先创建了一个 Pinia 实例。然后，我们使用 `defineStore` 函数来定义一个名为 `counter` 的状态。这个状态包含一个名为 `count` 的属性和一个名为 `increment` 的操作。最后，我们可以在组件中使用 `useStore` 函数来访问这个状态，并使用它来渲染界面和更新状态。
Pinia 同样也支持使用插件来扩展其功能。以下是一个使用插件来加密存储的示例：
javascript
import { createPinia } from 'pinia' import { encrypt, decrypt } from './encryption' const pinia = createPinia() const encryptedStoragePlugin = (store) => { const storage = window.localStorage const get = (key) => { const value = storage.getItem(key) return value ? JSON.parse(decrypt(value)) : null } const set = (key, value) => { storage.setItem(key, encrypt(JSON.stringify(value))) } return { onGlobalSetup() { store.$subscribe((mutation) => { set(mutation.key, mutation.value) }) }, state: Object.fromEntries( Object.keys(store.state).map((key) => [key, get(key) ?? store.state[key]]) ), } } pinia.use(encryptedStoragePlugin)
在这个示例中，我们首先定义了一个 `encryptedStoragePlugin` 插件，它使用加密算法来存储应用程序的状态。在插件中，我们首先获取到 `localStorage` 对象，并定义了两个函数 `get` 和 `set` 来读取和写入状态。然后，在 `onGlobalSetup` 钩子中，我们订阅了所有状态变化，并将它们写入到 `localStorage`。最后，我们返回一个包含所有状态的对象，将其作为插件的初始化状态。使用 `Object.fromEntries` 函数可以将一个键值对数组转换为一个对象。
要使用这个插件，我们只需要在创建 Pinia 实例时调用 `pinia.use(encryptedStoragePlugin)` 即可。
