低代码高性能原生UI框架

Appearance

本页导读

状态管理 ​

支持响应式状态管理，支持持久化存储

平台兼容性 ​

AndroidiOSweb鸿蒙 Next小程序
√√√xx

使用 ​

ts
import { $ux } from '@/uni_modules/ux-frame'

$ux.Store.set('data', '我是响应式数据')
import { $ux } from '@/uni_modules/ux-frame'

$ux.Store.set('data', '我是响应式数据')

Api ​

事件名参数说明
get{key: string}获取缓存数据
set{key : string, value : any}内存缓存数据，不会持久化
setExpires{key : string, value : any, expires: number}异步持久化缓存数据，可设置过期时间
setExpiresSync{key : string, value : any, expires: number}同步持久化缓存数据，可设置过期时间
delete{key : string}删除数据
clear-清空数据
getKeys-获取所有keys

示例代码 ​

ts
<script setup>
	import { $ux } from '@/uni_modules/ux-frame'
	
	let title = ''
	
	const data1 = computed((): any => {
		return $ux.Store.get('data1') ?? ''
	})
	
	const data2 = computed((): any => {
		return $ux.Store.get('data2') ?? ''
	})
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function setData1() {
		$ux.Store.set('data1', '我是响应式数据')
	}
	
	function delData1() {
		$ux.Store.delete('data1')
	}
	
	function setData2() {
		$ux.Store.setExpires('data2', '我是持久化数据', 0)
	}
	
	function setData3() {
		$ux.Store.setExpires('data2', '我是持久化数据（3000ms后自动删除）', 3000)
	}
	
	function delData2() {
		$ux.Store.delete('data2')
	}
</script>
<script setup>
	import { $ux } from '@/uni_modules/ux-frame'
	
	let title = ''
	
	const data1 = computed((): any => {
		return $ux.Store.get('data1') ?? ''
	})
	
	const data2 = computed((): any => {
		return $ux.Store.get('data2') ?? ''
	})
	
	onLoad((e: OnLoadOptions) => {
		title = e['title'] ?? ''
	})
	
	function setData1() {
		$ux.Store.set('data1', '我是响应式数据')
	}
	
	function delData1() {
		$ux.Store.delete('data1')
	}
	
	function setData2() {
		$ux.Store.setExpires('data2', '我是持久化数据', 0)
	}
	
	function setData3() {
		$ux.Store.setExpires('data2', '我是持久化数据（3000ms后自动删除）', 3000)
	}
	
	function delData2() {
		$ux.Store.delete('data2')
	}
</script>
html
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="状态管理" :bold="true">
				<ux-text text="支持响应式状态管理，支持持久化存储"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="状态管理" text="https://www.uxframe.cn/libs/store.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="响应式" :bold="true">
				<ux-text text="支持响应式，任意地方存储、任意地方获取" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="primary" :text="data1" :mr="5" :mb="15"></ux-text>
					
					<ux-button :mb="10" text="存储" @click="setData1"></ux-button>
					<ux-button text="删除" @click="delData1"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="持久化" :bold="true">
				<ux-text text="支持持久化存储，可配置过期时间，重启APP后自动加载到内存中" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="primary" :text="data2" :mr="5" :mb="15"></ux-text>
					
					<ux-button :mb="10" text="存储" @click="setData2"></ux-button>
					<ux-button :mb="10" text="存储(有效期 3000ms)" @click="setData3"></ux-button>
					<ux-button text="删除" @click="delData2"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>
<template>
	<ux-page>
		<ux-navbar :title="title" :border="false"></ux-navbar>
		
		<ux-scroll>
			<ux-card direction="column" icon="flag-filled" title="状态管理" :bold="true">
				<ux-text text="支持响应式状态管理，支持持久化存储"></ux-text>
				<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
					<ux-text text="详细文档："></ux-text>
					<ux-text style="flex: 1" name="状态管理" text="https://www.uxframe.cn/libs/store.html" path="/pages/webview/webview" mode="link"</ux-text>
				</ux-row>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="响应式" :bold="true">
				<ux-text text="支持响应式，任意地方存储、任意地方获取" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="primary" :text="data1" :mr="5" :mb="15"></ux-text>
					
					<ux-button :mb="10" text="存储" @click="setData1"></ux-button>
					<ux-button text="删除" @click="delData1"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-card direction="column" icon="arrowright" title="持久化" :bold="true">
				<ux-text text="支持持久化存储，可配置过期时间，重启APP后自动加载到内存中" :mb="15"></ux-text>
				<ux-col>
					<ux-text theme="primary" :text="data2" :mr="5" :mb="15"></ux-text>
					
					<ux-button :mb="10" text="存储" @click="setData2"></ux-button>
					<ux-button :mb="10" text="存储(有效期 3000ms)" @click="setData3"></ux-button>
					<ux-button text="删除" @click="delData2"></ux-button>
				</ux-col>
			</ux-card>
			
			<ux-placeholder :height="200">
				<ux-row justify="center" align="center" style="height: 100%;">
					<ux-text prefix-icon="soapbubble-filled" text="真的没有了~"></ux-text>
				</ux-row>
			</ux-placeholder>
		</ux-scroll>
		
	</ux-page>
</template>
css
<style lang="scss">
	
</style>
<style lang="scss">
	
</style>