例API存在于通过pinia导出的函数调用后的返回值中，主要有以下几种：
| $reset | 重置store到其初始状态 |
|---|---|
| $subscribe | 当state中的数据发生变化时调用，接收一个回调函数，其中有args和state两个参数 |
| $onAction | 当actions被调用时会执行这个函数，接收一个回调函数，有一个args参数 |
Pinia持久化插件：
import { createApp,toRaw } from 'vue'
// import './style.css'
import App from './App.vue'
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'
// import './css/index.css'
import { createPinia, PiniaPluginContext } from 'pinia'
export const app = createApp(App)
// app.use(ElementPlus)
type Options = {
key?: string
}
// 定义兜底变量,如果用户没有传key则默认key为'xiaoman'
const __piniaKey__: string = 'xiaoman'
// 在localsession中存储键值对
const setStorage = (key: string, value: any) => {
localStorage.setItem(key, JSON.stringify(value))
}
// 定义取内容的函数
const getData = (key:string) => {
return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
// 利用函数柯里化使key能够被传入
const piniaPlugin = (option: Options) => {
return (context: PiniaPluginContext) => {
const { store } = context
// 将数据取出并返回给state,使页面上的内容发生变化(store.$id是每个store的唯一标识符)
const data = getData(`${option?.key ?? __piniaKey__}-${store.$id}`)
store.$subscribe(() => {
// 由于store.$state是一个proxy对象,因此通过toRaw使其成为一个原始对象
// 如果没有传入key则默认为兜底变量xiaoman(??是空置合并运算符)
setStorage(`${option?.key ?? __piniaKey__}-${store.$id}`, toRaw(store.$state))
})
return {
...data
}
}
}
const store = createPinia()
store.use(
piniaPlugin({
key: 'pinia',
})
)
app.use(store)
app.mount('#app')
至此，pinia完结
