Skip to content

logo

多平台 uni-app / uni-app-x 生态状态管理库

简述

是一个专为 uni-app / uni-app-x 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有变量的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

特点

  • 中心化状态管理:使用单一的状态树,即一个全局的 state 对象,使得所有组件都能够访问和修改状态,便于状态的集中管理和维护。
  • 可预测的状态变化:状态的变化通过提交 getStore / setStore 来进行。这种变化是同步和可追踪的,便于调试和理解应用的状态变化。

兼容性

Vue 版本

Vue2Vue3

uni-app 版本

app-uvueapp-vueapp-nvue各端小程序H5

uni-app-x 版本

androidiosweb

mixinStore / useStore API

函数的使用方式在下方使用示例中体现,用法均一致。

函数描述示例
getState获取当前状态值getState("test")
setState设置当前状态值setState("test", "测试值")
getStore获取缓存值,与 uni.getStorageSync 一致getStore("test")
setStore设置缓存值,与 uni.setStorageSync 一致setStore("test", "测试值");
getStoreState获取当前缓存状态值,同时包含getStategetStore的功能getStoreState("test")
setStoreState设置当前缓存状态值,同时包含setStatesetStore的功能setStoreState("test", "测试值");

使用示例

注意:uni-app-xuni-app 使用方式在于导入的差异,用法一致。

uni-app-x 示例

普通模式

vue
<template>
	<view>
		<button @tap="onTap">点击设置</button>
		<view>{{getState("test")}}</view>
	</view>
</template>

<script>
	import {mixinStore} from "@/uni_modules/flower-store/uni-app-x";
	export default {
		mixins: [mixinStore],
		data() {
			return {
				
			}
		},
		methods: {
			onTap() {
				this.setState("test", "测试值")
			}
		}
	}
</script>

Composition API 模式

vue
<template>
	<view>
		<button @tap="onTap">点击设置</button>
		<view>{{useStore.getState("test")}}</view>
	</view>
</template>

<script setup>
	import { useStore } from "@/uni_modules/flower-store/uni-app-x";

	const onTap = () => {
		useStore.setState("test", "测试值")
	};
</script>

uni-app 使用示例

普通模式

vue
<template>
	<view>
		<button @tap="onTap">点击设置</button>
		<view>{{getState("test")}}</view>
	</view>
</template>

<script>
	import {mixinStore} from "@/uni_modules/flower-store/uni-app";
	export default {
		mixins: [mixinStore],
		data() {
			return {
				
			}
		},
		methods: {
			onTap() {
				this.setState("test", "测试值")
			}
		}
	}
</script>

Composition API 模式

vue
<template>
	<view>
		<button @tap="onTap">点击设置</button>
		<view>{{store.getState("test")}}</view>
	</view>
</template>

<script setup>
	import {store} from "@/uni_modules/flower-store/uni-app";

	const onTap = () => {
		store.setState("test", "测试值")
	};
</script>

适用领域

基于 uni-app OR uni-app-x 生态开发的组件库,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

版权信息

  • 遵循 MIT 开源协议,无需支付任何费用,也无需授权,即可将框架应用到产品中。
  • 仅供学习交流,如作它用所承受的法律责任一概与作者无关。

致谢

首先感谢 DCloud 官方,旗下出品的 uni-appuniClouduni-app 小程序 等多平台、多元化的技术体系。
其次感谢 DCloud 插件市场 开源作品的作者们,"捧着一颗心来,不带半棵草去。" 的开源奉献精神致敬。