pinia 持久化插件pinia-plugin-persistedstate 安装、使用(图文详解)

序：

        1、博主vue3、ts 5.x、pinia 2.1.3版本，

        2、所以如果试了不行的你看看是不是自己版本和博主的对不上

        3、其实就是省略掉localStorage 这一步，会自己写的小伙伴自己写个也是蛮快的

        4、放个中文文档==》Home | pinia-plugin-persistedstate

        5、压缩localStorage 要存的数据，我记得每个浏览器对localStorage 的存储是有限制大小的有的1M 有的6M。哪天你纯localStorage 发现没效果，或者丢失，你都不知道什么问题导致的。

一、安装依赖

 1、依赖

cnpm i pinia-plugin-persistedstate -S

2、 main.ts

import pinia from '@/stores'
app.use(pinia)

3、stores/index.ts

import { ref, computed } from 'vue'
import { createPinia,defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

export const useCounterStore = defineStore('counter', () => {
	const i=ref(0);
	const edit=(val:number)=>{
		i.value=val;
	}
	const newi=computed(():number=>{
		return i.value;
	})
	// const edit=
	return{
		i,
		newi,
		edit
	}
},{persist: true});

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

 

4、 index.vue   调用 

二、demo案例

1、这个是两个变量（别在乎细节，我纯为了演示和好理解）

他是存在一个key里面的！没办法出

store.ts

import { ref, computed } from 'vue'
import { createPinia,defineStore } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

export const useCounterStore = defineStore('counter', () => {
	const i=ref(0);
	const b=ref(null);

	const edit=(val:number)=>{
		i.value=val;
	}
	const newi=computed(():number=>{
		return i.value;
	})

	const edit1=(val:string)=>{
		b.value=val;
	}
	const newi1=computed(():(string|null)=>{
		return b.value;
	})

	// const edit=
	return{
		i,
		newi,
		edit,
		b,
		newi1,
		edit1,
	}
},{persist: true});

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;

index.vue

好，我们认下接下去要改变存储的变量key 

key: 'cyc'

 三、压缩加密

        序那边博主开头说了，每个浏览器对localStorage 是有限制大小的，你不压缩，有时候你触发了某个bug，你都不知道怎么回事，来，跟着博主操作

1、安装依赖

cnpm install zipson -S

2、配置stores/index.ts

serializer: {
			deserialize: parse,
			serialize: stringify,
		},

3、运行