Pinia的持久化存储插件

Nephilim 2024-03-19

209

Tips：一些记录，一些笔记

2024/03/19

TUESDAY

Success grows out of struggles to overcome difficulties.

成功来源于克服困难的斗争。

pinia-plugin-persistedstate

「pinia-plugin-persistedstate」是一个适用于Pinia的持久化存储插件。

它的官方网站是：

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

可以参考它的官方文档进行安装与进阶使用：

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

安装

如下所示：

(base) adamhuan@Leviathan vue-visible-abyss % pwd
/Users/adamhuan/project_visible_abyss/vue-visible-abyss
(base) adamhuan@Leviathan vue-visible-abyss % 
(base) adamhuan@Leviathan vue-visible-abyss % pnpm list
Legend: production dependency, optional only, dev only


vue-visible-abyss@0.0.0 Users/adamhuan/project_visible_abyss/vue-visible-abyss (PRIVATE)


dependencies:
@element-plus/icons-vue 2.3.1
element-plus 2.6.1
less 4.2.0
pinia 2.1.7
sass 1.72.0
vue 3.4.21


devDependencies:
@vitejs/plugin-vue 5.0.4                unplugin-auto-import 0.17.5             
@vue-macros/reactivity-transform 0.4.3  unplugin-icons 0.18.5                   
eslint 8.57.0                           unplugin-vue-components 0.26.0          
eslint-config-prettier 9.1.0            vite 5.1.6                              
eslint-plugin-prettier 5.1.3            vite-plugin-element-plus 0.0.12         
eslint-plugin-vue 9.23.0                vite-plugin-eslint 1.8.1                
prettier 3.2.5                          
(base) adamhuan@Leviathan vue-visible-abyss % 
(base) adamhuan@Leviathan vue-visible-abyss % pnpm install pinia-plugin-persistedstate
 WARN  deprecated vite-plugin-element-plus@0.0.12: This plugin is deprecated please use https://github.com/element-plus/unplugin-element-plus instead
Packages: +1
+
Progress: resolved 307, reused 272, downloaded 1, added 1, done


dependencies:
+ pinia-plugin-persistedstate 3.2.1


Done in 1.3s
(base) adamhuan@Leviathan vue-visible-abyss % 
(base) adamhuan@Leviathan vue-visible-abyss % pnpm list                               
Legend: production dependency, optional only, dev only


vue-visible-abyss@0.0.0 Users/adamhuan/project_visible_abyss/vue-visible-abyss (PRIVATE)


dependencies:
@element-plus/icons-vue 2.3.1
element-plus 2.6.1
less 4.2.0
pinia 2.1.7
pinia-plugin-persistedstate 3.2.1
sass 1.72.0
vue 3.4.21


devDependencies:
@vitejs/plugin-vue 5.0.4                unplugin-auto-import 0.17.5             
@vue-macros/reactivity-transform 0.4.3  unplugin-icons 0.18.5                   
eslint 8.57.0                           unplugin-vue-components 0.26.0          
eslint-config-prettier 9.1.0            vite 5.1.6                              
eslint-plugin-prettier 5.1.3            vite-plugin-element-plus 0.0.12         
eslint-plugin-vue 9.23.0                vite-plugin-eslint 1.8.1                
prettier 3.2.5                          
(base) adamhuan@Leviathan vue-visible-abyss %

可以通过「pnpm list」看到「pinia-plugin-persistedstate」已经安装成功了。

将插件添加到Pinia实例

如图所示：

文件「src/main.js」

// 引入函数「createApp」
import { createApp } from "vue";


// 引入样式
import "@/styles/index.scss";


// 引入 Element Plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";


// 引入所有图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";


// 引入组件
import App from "./App.vue";


// 路由
import router from "./router";


// Pinia
import { createPinia } from "pinia";


// Pinia 持久化
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";


// Pinia: Store
import store from "@/store/index.js";


// 创建 Pinia 实例
const pinia = createPinia();
// 添加 Pinia 持久化插件
pinia.use(piniaPluginPersistedstate);


// 创建 Vue 实例
const app = createApp(App);


// 使用 Pinia
app.use(pinia);


// 注册全局 Store
app.config.globalProperties.$store = store;


// 使用路由
app.use(router);


// 使用 Element Plus
app.use(ElementPlus, {
  //   size: "small",
  //   zIndex: 3000,
});


// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}


// 混入「Mixins」
import mixin from "@/mixins/index.js";
app.mixin(mixin);


// 过滤器（Filters）
import { filters } from "@/filters/index.js";
app.config.globalProperties.$filters = filters;


// 挂载Vue实例
app.mount("#app");

用法

一、如何使用「持久化存储插件」？

创建 Store 时，将 persist
选项设置为 true
。

具体说来，有两种方法：

选项式语法
组合式语法

选项式语法：

import { defineStore } from 'pinia'


export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

组合式语法：

import { defineStore } from 'pinia'


export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

二、清空与归零：

// 清空当前 Store 在 Pinia 中持久化的数据
this.$reset


// 最终真正清空 Storage 数据
window.localStorage.clear();
window.sessionStorage.clear();

在组合式API中直接使用「$reset()」会报错；

解决方法：

改用「选项式API」
重写「$reset()」

文件「src/main.js」

pinia.use(({ store }) => {
  const initialState = JSON.parse(JSON.stringify(store.$state));
  store.$reset = () => {
    store.$patch(initialState);
  };
});

进阶用法

安装完插件后，可以使用「createPersistedState」来初始化插件；

这样，这些配置将会成为你的项目中所有的Store的默认选项；

这种方式，有时候也被称为「工厂函数」

这一部分的更多配置可以参考官方文档：

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/advanced.html

具体如下：

文件「src/main.js」

// 引入函数「createApp」
import { createApp } from "vue";


// 引入样式
import "@/styles/index.scss";


// 引入 Element Plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";


// 引入所有图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";


// 引入组件
import App from "./App.vue";


// 路由
import router from "./router";


// Pinia
import { createPinia } from "pinia";


// Pinia 持久化
// - 普通用法
// import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// - 进阶用法
import { createPersistedState } from "pinia-plugin-persistedstate";


// Pinia: Store
import store from "@/store/index.js";


// 创建 Pinia 实例
const pinia = createPinia();
// 添加 Pinia 持久化插件
// - 普通用法
// pinia.use(piniaPluginPersistedstate);
// - 进阶用法
pinia.use(
  createPersistedState({
    // 启用所有Store默认持久化
    auto: true,
    // 将数据持久化到哪里
    // storage: sessionStorage,
  }),
);


// 创建 Vue 实例
const app = createApp(App);


// 使用 Pinia
app.use(pinia);


// 注册全局 Store
app.config.globalProperties.$store = store;


// 使用路由
app.use(router);


// 使用 Element Plus
app.use(ElementPlus, {
  //   size: "small",
  //   zIndex: 3000,
});


// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}


// 混入「Mixins」
import mixin from "@/mixins/index.js";
app.mixin(mixin);


// 过滤器（Filters）
import { filters } from "@/filters/index.js";
app.config.globalProperties.$filters = filters;


// 挂载Vue实例
app.mount("#app");

在页面查看效果

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

持久化软件 eslint vue element

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Pinia的持久化存储插件

评论