Pinia创库

安装Pinia

npm install pinia

基本配置

store.js中的配置pinia

// 导入pinia
import { createPinia } from 'pinia';

// 创建pinia实例
const pinia = createPinia();

// 暴露store
export const store = (app: { use: Function }) => (app.use(pinia));

创库配置以及ts推衍示例

/** 仓库配置 */
import { defineStore } from 'pinia';
// api请求 （可有可无）
import { api } from '@/api/index';
// 导入全局属性以及方法 （可有可无）
import { appInst } from '@/app/index';
// 类型推衍
import type { TYPE_FILELIST } from "@/store/type";
// 暴露仓库
export const useFileListStore = defineStore("FileList", {
    // 属性
    state: (): TYPE_FILELIST => {
        return { }
    },
    // 计算属性
    getters: { },
    // 事件，方法
    actions: {
        // 默认加载 （示例）
        onLoad(this: TYPE_FILELIST) { },
    },
});

@/store/type文件中的配置

// ts推衍示例
export interface TYPEPARAMETER {
    title: string | number;
    options: Array<any>;
    placeholder: boolean;
    defineStore: Function,
    appInst: {
        $api: object,
        [name: string]: any
    }
}

export interface TYPE_FILELIST {
    // 文件列表
    files: any;

    // 我的账号
    $myAccount: object;

    // 头像http头部链接
    $avatarImgHttp: string;

    // 头像框http链接
    $avatarFrameImgHttp: string;

    // 产品图片地址
    $productFileImgHttp: string;
}

Pinia持久化存储

安装pinia-plugin-persistedstate

npm install pinia-plugin-persistedstate

store.js入口文件中导入

// 导入pinia
import { createPinia } from 'pinia';

// 持久化存储依赖
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

// 创建pinia实例
const pinia = createPinia();

// 使用持久化存储依赖
pinia.use(piniaPluginPersistedstate);

// 暴露store
export const store = (app: { use: Function }) => (app.use(pinia));

pinia store仓库中使用持久化存储

/** 文件列表仓库 */
import { defineStore } from 'pinia';
// 导入全局属性以及方法
import { appInst } from '@/app/index';
// 类型
import type { TYPE_FILELIST } from "@/store/type";
// 暴露仓库
export const useFileListStore = defineStore("FileList", {
    state: (): TYPE_FILELIST => {
        return {
            // 文件列表
            files: [],
            // 我的账号
            $myAccount: {},
            // 头像http头部链接
            $avatarImgHttp: '',
            // 头像框http链接
            $avatarFrameImgHttp: '',
            // 产品图片地址
            $productFileImgHttp: '',
        }
    },

    // ----------------------------
    // 其他代码
    // ----------------------------
    
    
    // persist为true，表示该仓库整个 Store 将使用默认持久化配置保存。
    persist: true, 
 
    // 用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state。
    persist: {
        // 表示$myAccount和files则被持久存储
        paths: ['$myAccount', 'files'],
    },
 
    // 方法
    persist: {
        // 该 beforeRestore 将在从 storage 中恢复数据之前触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之前强制地执行特定的操作。
        beforeRestore: (ctx: any) => {
            console.log(`即将恢复 '${ctx.store.$myAccount}'`)
        },
        // 该 afterRestore 将在从 storage 中恢复数据之后触发，并且它可以访问整个 PiniaPluginContext，这可用于在恢复数据之后强制地执行特定的操作。
        afterRestore: (ctx: any) => {
            console.log(`刚刚恢复完 '${ctx.store.$myAccount}'`)
        },
    },
 
    persist: {
        // 保存的key名
        key: 'USERAVATAR',
        // 存储方式
        storage: localStorage,
        // 当前的属性进行持久化存储
        pick: ['$myAccount.avatar', '$myAccount.avatarFrame', "$myAccount.endTime", "$avatarImgHttp", "$avatarFrameImgHttp", "$productFileImgHttp"],
        // 自定义序列化程序，用于在持久化之前序列化数据，并在解除冻结存储之前反序列化数据。
        serializer: {
            // 持久化数据之前执行
            serialize(state) {  // state是上面指定保存的值 如 pick: ['$myAccount.avatar', '$myAccount.avatarFrame', ...]
                // 没有账户不进行存储任何数据
                if(!state.$myAccount.endTime) return '';
                // 转为json字符串进行保存
                const result = JSON.stringify(state);
                // 加密数据
                return appInst.$Crypto.AES.encrypt(result, appInst.decode(appInst.AES_Password)).toString().replace(/=/g, '');
            },
            // 恢复数据之前执行
            deserialize(state) {
                // 解密数据
                const result = appInst.$Crypto.AES.decrypt(state, appInst.decode(appInst.AES_Password)).toString(appInst.$Crypto.enc.Utf8);
                // 转换对象并返回数据
                return JSON.parse(result);
            }
        }
    },
});