uniapp 使用 全局状态 持久化工具 pinia-plugin-unistorage

一 、为什么使用到了pinia-plugin-unistorage

        我在用uniapp开发Android 移动端时，有功能是修改用户昵称和用户头像，这样就涉及到“我的界面”和“分享界面” 两处需要都更新用户昵称或头像。

        但如果使用 uni.setStorageSync 它虽然可以缓存，但无法响应式更新，所以我就找到了状态管理工具，以前vue项目使用的状态管理工具是vuex，我在uniapp官网找到了pinia这个对应vue3的状态管理工具。

        找到pinia后，还需要将状态管理的数据持久化在本地，所以我才找到了

        pinia-plugin-unistorage 他的官网地址

二、具体代码

第一个是userStrore，用户信息的全局状态管理

// stores/user.js
import { defineStore } from 'pinia';

export const userStore = defineStore('userStoreTemp', {
	state(){
		return { 
			user: {},
			token: {},
		};
	},
	unistorage: true, // 开启后对 state 的数据读写都将持久化
	actions: {
		setUserInfo(user){
			this.user = user;
		},
		updateUserName(userName){ //更新用户昵称
			this.user.userName = userName;
		},
		updateUserAvator(avator){ //更新用户头像
			this.user.portrait = avator;
		}
	},
});

如何使用userStore 用户全局状态管理

import {userStore} from '@/stores/user.js'
const userStoreTemp = userStore();
//将从后台获取的用户，存储在状态管理中
userStoreTemp.setUserInfo(result.data.user);