Pinia 插件
Pinia 生态已有许多插件,可以扩展更多功能:
pinia-plugin-persistedstate:数据持久化pinia-plugin-debounce:防抖修改状态pinia-plugin-pinia-observable:转换成 Observable
import piniaPluginPersist from 'pinia-plugin-persist' pinia.use(piniaPluginPersist)
Devtools
Pinia支持Vue devtools
购物车示例
我们来通过一个购物车的例子看看 Pinia 的用法:
// store.js import { defineStore } from 'pinia' export const useCartStore = defineStore('cart', { state: () => { return { items: [] } }, getters: { total(state) { return state.items.reduce((total, item) => { return total + item.price }, 0) } }, actions: { addItem(item) { this.items.push(item) }, removeItem(id) { this.items = this.items.filter(i => i.id !== id) } } })
在组件中使用:
// Cart.vue import { useCartStore } from '@/stores/cart' setup() { const cart = useCartStore() return { items: cart.items, total: cart.total } }
可以看出代码非常简洁直观。
Pinia 插件
Pinia 插件是一个函数，可以选择性地返回要添加到 store 的属性。它接收一个可选参数，即 context。
export function myPiniaPlugin(context) { context.pinia // 用 `createPinia()` 创建的 pinia。 context.app // 用 `createApp()` 创建的当前应用(仅 Vue 3)。 context.store // 该插件想扩展的 store context.options // 定义传给 `defineStore()` 的 store 的可选对象。 // ... }
然后用 pinia.use() 将这个函数传给 pinia：
pinia.use(myPiniaPlugin)
插件只会应用于在 pinia 传递给应用后创建的 store，否则它们不会生效。
实现一个持久化插件
getStorage函数：根据提供的key从本地存储中读取数据。如果数据无法解析或不存在，则返回null。setStorage函数：将提供的值转换为 JSON 格式，并以指定的key保存到本地存储中。DEFAULT_KEY常量：表示默认的本地存储键名前缀。如果在选项中未提供自定义键名，将使用该默认键名。Options类型：定义了插件选项对象的类型，包含key（本地存储键名前缀）和needKeepIds（需要进行持久化的 Pinia 存储的 ID 数组）两个可选属性。- piniaPlugin` 函数：这是主要的插件函数，它接收一个选项对象，并返回一个用于处理 Pinia 存储的函数。
import { PiniaPluginContext } from "pinia"; import { toRaw } from "vue"; // Get data from local storage by key export function getStorage(key) { const data = localStorage.getItem(key); try { return JSON.parse(data); } catch (error) { return null; } } // Set data to local storage with a key export function setStorage(key, value) { const data = JSON.stringify(value); localStorage.setItem(key, data); } const DEFAULT_KEY = "pinia"; type Options = { key?: string; needKeepIds?: string[]; }; const piniaPlugin = ({ key = DEFAULT_KEY, needKeepIds = [] }: Options) => { return (context: PiniaPluginContext) => { const { store } = context; const data = getStorage(`${key}-${store.$id}`); const subscribeToStore = () => { if (needKeepIds.length === 0 || needKeepIds.includes(store.$id)) { setStorage(`${key}-${store.$id}`, toRaw(store.$state)); } }; store.$subscribe(subscribeToStore); return { ...data, }; }; }; export default piniaPlugin;
图解算法小册
最近整理了一本算法小册，感兴趣的同学可以加我微信
linwu-hi进行获取
