outline: deep

vue3-pinia持久化

1、安装插件

npm i pinia-plugin-persistedstate 
//或者
yarn add pinia-plugin-persistedstate

2、引入使用

//main.js 
import { createPinia } from 'pinia' 
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' 

app.use(createPinia().use(piniaPluginPersistedstate)); //pinia状态管理 //pinia持久化

3、使用插件

定义一个全局使用方法的部分

src\store\storage\persist.ts

import type { PersistenceOptions } from "pinia-plugin-persistedstate";
/**
 * @description pinia 持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @param {Array} paths 需要持久化的 state name
 * @return persist
 * */
const piniaPersistConfig = (key: string, paths?: string[]) => {
  const persist: PersistenceOptions = {
    key,
    storage: localStorage,
    pick: paths
  };
  return persist;
};
export default piniaPersistConfig;

4、项目使用

设置标签页是否显示ICON

定义一个全局存储数据的部分，放入我们仓库

src\store\modules\global.ts

import { defineStore } from "pinia";
import { config } from "@/config/index";
import piniaPersistConfig from "@/store/storage/persist";

export type LayoutType = "vertical" | "classic" | "transverse" | "columns";
export type AssemblySizeType = "large" | "default" | "small";
export type LanguageType = "zh" | "en" | null;
/* GlobalState */
export interface GlobalState {
  layout: LayoutType;
  assemblySize: AssemblySizeType;
  language: LanguageType;
  maximize: boolean;
  primary: string;
  isDark: boolean;
  isGrey: boolean;
  isWeak: boolean;
  asideInverted: boolean;
  headerInverted: boolean;
  isCollapse: boolean;
  accordion: boolean;
  watermark: boolean;
  breadcrumb: boolean;
  breadcrumbIcon: boolean;
  tabs: boolean;
  tabsIcon: boolean;
  footer: boolean;
}
type ObjToKeyValArray<T> = {
  [K in keyof T]: [K, T[K]];
}[keyof T];
export const useGlobalStore = defineStore("global",{
  // 修改默认值之后，需清除 localStorage 数据
  state: (): GlobalState => ({
    // 布局模式 (纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns)
    layout: "vertical",
    // element 组件大小
    assemblySize: "default",
    // 当前系统语言
    language: null,
    // 当前页面是否全屏
    maximize: false,
    // 主题颜色
    primary: config.themeSetting.Default_Theme_Color,
    // 深色模式
    isDark: false,
    // 灰色模式
    isGrey: false,
    // 色弱模式
    isWeak: false,
    // 侧边栏反转
    asideInverted: false,
    // 头部反转
    headerInverted: false,
    // 折叠菜单
    isCollapse: false,
    // 菜单手风琴
    accordion: true,
    // 页面水印
    watermark: false,
    // 面包屑导航
    breadcrumb: true,
    // 面包屑导航图标
    breadcrumbIcon: true,
    // 标签页
    tabs: true,
    // 标签页图标
    tabsIcon: true,
    // 页脚
    footer: true
  }),
  getters: {},
  actions: {
    // Set GlobalState
    setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
      this.$patch({ [args[0]]: args[1] });
    }
  },
  persist: piniaPersistConfig("global")
});

配置icon

// 全局配置仓库
import { useGlobalStore } from "@/store/modules/global";

//是否显示 tabs 图标
const globalStore = useGlobalStore();

const globalStore = useGlobalStore();
const tabsIcon = computed(() => globalStore.tabsIcon);

项目之中改变,这个时候测试，我们的功能已经ok了

<template>
  <el-switch
    :active-value="true"
    :inactive-value="false"
    active-text="显示图标"
    inactive-text="不显示图标"
    v-model="tabsIcon"
    @change="handleTabsIconChange"
  />
</template>

<script setup lang="ts">
import { useGlobalStore } from '@/store/modules/global';
import { storeToRefs } from 'pinia';

const globalStore = useGlobalStore();
const { tabsIcon } = storeToRefs(globalStore);

const handleTabsIconChange = (value: boolean) => {
  globalStore.setGlobalState('tabsIcon', value);
};
</script>