uniapp项目使用vue3 pinia数据持久化存储及修改、删除

插件市场找到相关插件可直接导入到项目中：pinia-plugin-unistorage - DCloud 插件市场

根据插件文档使用说明安装使用：

下面我来简单说一下我用到的使用方式：

我的项目中主要存储了用户token及用户信息。

import { defineStore } from "pinia";
import {reactive, ref} from 'vue'

export const useStore = defineStore("main",() => {
	
	// token
	const token = ref<string>('');
	// 用户信息
	const userInfo = reactive({});
	
    return {
		token,
		userInfo
	};
  },{
    unistorage: true, // 开启后对 state 的数据读写都将持久化
  },
);

使用数据：（vue文件引入之后即可使用）

// pinia
import { useStore } from '@/stores/counter'
const counter = useStore()

console.log(counter.token)
console.log(counter.userInfo)

修改数据：（基础数据类型可直接修改，reactive生命的对象需要使用Object.assign函数来赋值）

counter.token = '1111111111'
Object.assign(counter.userInfo,{a:1,b:2,c:3})

// 修改对象下的某个值也可以直接修改
counter.userInfo.a = 11

这里如果用户退出登录使用以下方式：token清除了，但userInfo中的数据依然存在。

counter.token = ''
Object.assign(counter.userInfo,{})

查阅到使用$reset()方法重置：但代码报错了，语法不支持

然后根据报错信息找到解决的保存：pinia 无法使用$reset()方法_pinia reset-CSDN博客

当我准备使用的时候，突然想到vue2中的vuex中的state需要在mutations或actions中修改，然后我在counter.ts中新增了一个方法：

import { defineStore } from "pinia";
import {reactive, ref} from 'vue'

export const useStore = defineStore("main",() => {
	
	// token
	const token = ref<string>('');
	// 用户信息
	const userInfo = reactive({});
	
	// 重置
	const result  = ()=>{
		token.value = ''
		for (const key in userInfo) {
		    if(userInfo.hasOwnProperty(key)) {
				delete userInfo[key];
		    }
		}
	}
	
    return {
		token,
		userInfo,
		result
	};
  },{
    unistorage: true, // 开启后对 state 的数据读写都将持久化
  },
);

直接调用完美解决！！！！！

counter.result()