TuiStore 状态管理

支持持久化存储，支持全局响应数据响应，有了TuiStore可以不用在自己写状态管理逻辑了，就和uni.setStorage使用一样方便，且数据可以全局响应使用

<template>
	<t-page main-class="p-30">
		<t-card main-class="mb-30" title="TuiStore 状态管理"
			subTitle="支持持久化存储，支持全局响应数据响应，有了TuiStore可以不用在自己写状态管理逻辑了，就和uni.setStorage使用一样方便，且数据可以全局响应使用"></t-card>
		<t-section main-class="tdr mb-30" title="存储对象形式的响应式数据" subTitle="存储登录用户信息示例"></t-section>
		<t-col main-class="tdr tdb mb-30 tdp">
			<t-text main-class="mb-10">token：{{tokens.tokenTest ?? '未登录'}}</t-text>
			<t-text main-class="mb-10">refreshToken：{{tokens.refreshTokenTest ?? '未登录'}}</t-text>
			<t-text main-class="mb-10">用户名：{{usetinfo.username ?? '未登录'}}</t-text>
			<t-text main-class="mb-10">年龄：{{usetinfo.age ?? '未设置'}}</t-text>
			<t-text main-class="mb-10">性别：{{usetinfo.gentter ?? '未设置'}}</t-text>
			<t-button type="p" effect="l" main-class="mtb-30" @click="login">模拟登录</t-button>
			<t-button type="p" effect="l" main-class="mb-30" @click="onlogout">退出登录（清除状态数据）</t-button>
			<t-button type="p" effect="l" main-class="mb-30" @click="setExpire">创建一个会过期时间的数据(1000ms)</t-button>
			<t-button type="p" effect="l" path="/pagesA/api/store/store-update">去其它页修改数据，测试全局响应</t-button>
		</t-col>
	</t-page>
</template>

<script setup>
	import { TuiStore } from '@/uni_modules/tui-plugins';
	// 数字 布尔 字符串这些数据类型使用TuiStore实现全局响应（存储响应token的演示） 
	const store = new TuiStore()
	const tokens : UTSJSONObject = store.value
	const usetinfo : UTSJSONObject = store.get('userinfoTest') //获取指定key的对象
	function login() {
		store.set('tokenTest', 'jksdksfji8h')
		store.set('refreshTokenTest', '489DFGAGd4584sdf')
		store.set('userinfoTest', { username: '风中的魔镜', age: 18, gentter: '男生' })
		uni.showToast({
			title: '登录成功'
		})
	}
	function setExpire() {
		store.set('setExpire', 'jksdksfji8h', 1000)
		uni.showToast({
			title: '创建成功，1000ms后数据失效'
		})
	}
	function onlogout() {
		store.delete('userinfoTest', 'refreshTokenTest', 'tokenTest')
	}
</script>