//   FilePath <  @/main.ts >

import { createApp, toRaw } from 'vue'
import App from './App.vue'
//	引入pinia
import { createPinia, PiniaPluginContext } from "pinia";

const app = createApp(App)

type Options = {
    key?: string
}
//	默認的key
const __piniaKey__: string = 'Ocean'
//	負責存儲的函數
const setStorage = (key: string, value: any) => {
    //	將對象轉字符串后存入 localStorage
    localStorage.setItem(key, JSON.stringify(value))
}
//	負責取值的函數
const getStorage = (key: string) => {
    //	根據key拿到localStorage中對應的值
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}
//	Pinia持久化插件
const piniaPlugin = (options: Options) => {
    return (context: PiniaPluginContext) => {
        const { store } = context
        const data = getStorage(`${options?.key ?? __piniaKey__}-${store.$id}`)
        console.log(data);
        
        store.$subscribe(() => {
            // store.$state是一個 proxy 對象 要通過 toRaw() 轉換成 原始對象
            setStorage(`${options?.key ?? __piniaKey__}-${store.$id}`,toRaw(store.$state))
        })
        return {
            ...data
        }
    }
}
//	創(chuàng)建一個Pinia實例
const store = createPinia()
//	注冊插件
store.use(piniaPlugin({
    key: 'pinia'
}))

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

import { createPinia } from 'pinia'
//pinia 持久化插件
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

? persist: {
? ? ? ? enabled: true,
? ? ? ? strategies: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? key: 'user',
? ? ? ? ? ? ? ? storage: localStorage,
? ? ? ? ? ? ? ? path:[] //可以選擇保存的字段 ?其余的不保存
? ? ? ? ? ? }
? ? ? ? ]
? ? }