import { defineStore } from 'pinia';
import { ref } from 'vue';

/**
 * 测试pinia中使用pinia-plugin-persistedstate库实现持久化存储
 * 文档地址：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
 * pinia中defineStore有两种写法，当前test采用的setup syntax（option syntax请参考其他store）
 *
 * 使用方法：
 * 1. 安装pinia-plugin-persistedstate库：pnpm add pinia-plugin-persistedstate
 * 2. 在store/index.ts中引入pinia-plugin-persistedstate库：
 *    import { createPersistedStatePlugin } from 'pinia-plugin-persistedstate';
 * 3. 使用插件
 *    const store = createPinia();
 *    store.use(piniaPluginPersistedstate);
 * 4. 在store/modules/test.ts中使用defineStore创建store，并配置persist选项，key为my-test，storage为window.sessionStorage
 * 5. 需要在整个项目中使用一次，才能在sessionStorage看到对应的存储数据，如果想要初始化就有可以在app.vue中调用，本示例在welcome页面调用（如果不调用，data中的count值不会被持久化，且不存在pinia的内存中）
 */
export default defineStore(
    'test',
    () => {
        const count = ref(0);
        const updateCount = () => {
            count.value++;
        };
        return {
            count,
            updateCount,
        };
    },
    {
        persist: {
            key: 'my-test',
            // 使用sessionStorage存储数据，默认为localStorage
            storage: window.sessionStorage,
        },
    }
);
