<template>
	<view class="w-body">
		<w-navbar fixed left-home left-back title="数据仓库示例" class="navbar"></w-navbar>
		<view style="padding:1rem;">
			<view>demo1Store非持久化仓库示例数据:</view>
			<view style="font-size:0.8rem; border:solid 1px var(--w-main-light-1); padding: .5rem; margin: 1rem 0;">
				<view>demo1Store.name : {{demo1Store.name}}</view>
				<view>demo1Store.getName : {{demo1Store.getName}}</view>
				<view>demo1Store.sex : {{demo1Store.sex}}</view>
				<view>demo1Store.getSex : {{demo1Store.getSex}}</view>
				<view>demo1Store.age : {{demo1Store.age}}</view>
			</view>
			<view class="btns">
				<view>
					<u-button type="primary" plain @tap="$u.toast(demo1Store.name)">读取属性name</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="$u.toast(demo1Store.getName)">读取计算属性getName</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo1Store.name='张三'">设置属性name='张三'</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo1Store.setName('李四')">执行方法setName('李四')</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo1Store.$reset()">执行$reset()重置</u-button>
				</view>
			</view>

			<u-divider></u-divider>

			<view>demo2Store持久化仓库示例数据:</view>
			<view style="font-size:0.8rem; border:solid 1px var(--w-main); padding: 1rem; margin: 1rem 0;">
				<view>demo2Store.name : {{demo2Store.name}}</view>
				<view>demo2Store.getName : {{demo2Store.getName}}</view>
				<view>demo2Store.sex : {{demo2Store.sex}}</view>
				<view>demo2Store.getSex : {{demo2Store.getSex}}</view>
				<view>demo2Store.age : {{demo2Store.age}}</view>
			</view>
			<view class="btns">
				<view>
					<u-button type="primary" plain @tap="$u.toast(demo2Store.name)">读取属性name</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="$u.toast(demo2Store.getName)">读取计算属性getName</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo2Store.name='张三'">设置属性name='张三'</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo2Store.setName('李四')">执行方法setName('李四')</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="demo2Store.$reset()">执行$reset()重置</u-button>
				</view>
				<view>
					<u-button type="primary" plain @tap="$w.uni.clearStorage()">清空缓存(不建议)</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useDemo1Store,
		useDemo2Store
	} from '@/store'

	const demo1Store = useDemo1Store();
	const demo2Store = useDemo2Store();
</script>

<style lang="scss" scoped>
	.w-body {
		.btns {

			view {
				margin: .2rem;
			}
		}
	}
</style>