# TuiStore 状态管理

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

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

<script setup>
	import { TuiStore } from '@/uni_modules/tui-common';
	// 数字 布尔 字符串这些数据类型使用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>