2024你应该知道如何使用pinia持久化并加密数据

252 阅读1分钟

纯干货,这个都看不懂,那就多学习一下技术吧。加油~~

一.下载pinia

npm i pinia(不会的自己想办法)

二.下载pinia-plugin-persistedstate

 npm i pinia-plugin-persistedstate
 作用:持久化

三.下载zipson

npm i zipson
作用:加密数据

四.使用pinia

main.js中

   import * as Pinia from 'pinia'
   import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
   const pinia = Pinia.createPinia()
   pinia.use(piniaPluginPersistedstate)
   import {createSSRApp} from 'vue'
   export function createApp() {
   const app = createSSRApp(App)
   app.use(pinia);
    return {
        app
        }
    }

五.新建文件夹store

在store文件夹中新建一个index.js文件

    import {defineStore} from 'pinia'
    import {parse,stringify} from 'zipson'
    export const useCounterStore = defineStore('counter', {
        state: () => ({
	count: 5,
            }),
        getters: {
	doubleCount: (state) => state.count * 2
            },
        actions: {
	setCount() {
                this.count++;
	},
        },
        persist: {
	storage: {
		getItem: uni.getStorageSync,//我是uniapp,看你的项目
		setItem: uni.setStorageSync//我是uniapp,看你的项目
	},
	serializer: {
		deserialize: parse,
		serialize: stringify,
	},
},

})

六.在你需要使用的页面使用

import { useCounterStore } from '@/store/index.js';
const useCounterStore = useCounterStore()

后面就使用useCounterStore去使用pinia里面的数据就可以了