插件市场找到相关插件可直接导入到项目中: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()

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐