1
//   FilePath <  @/main.ts >
2

3
import { createApp, toRaw } from 'vue'
4
import App from './App.vue'
5
//  引入pinia
6
import { createPinia, PiniaPluginContext } from "pinia";
7

8
const app = createApp(App)
9

10
type Options = {
11
    key?: string
12
}
13
//  默认的key
14
const __piniaKey__: string = 'Ocean'
15
//  负责存储的函数
16
const setStorage = (key: string, value: any) => {
17
    //  将对象转字符串后存入 localStorage
18
    localStorage.setItem(key, JSON.stringify(value))
19
}
20
//  负责取值的函数
21
const getStorage = (key: string) => {
22
    //  根据key拿到localStorage中对应的值
23
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
24
}
25
//  Pinia持久化插件
26
const piniaPlugin = (options: Options) => {
27
    return (context: PiniaPluginContext) => {
28
        const { store } = context
29
        const data = getStorage(`${options?.key ?? __piniaKey__}-${store.$id}`)
30
        console.log(data);
31

32
        store.$subscribe(() => {
33
            // store.$state是一个 proxy 对象 要通过 toRaw() 转换成 原始对象
34
            setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
35
        })
36
        return {
37
            ...data
38
        }
39
    }
40
}
41
//  创建一个Pinia实例
42
const store = createPinia()
43
//  注册插件
44
store.use(piniaPlugin({
45
    key: 'pinia'
46
}))
47

48
app.use(store)
49
app.mount('#app')