更新记录

1.0.2（2024-05-07）

• 【优化】删减全局引入方式，更加快速便捷
• 【版本兼容】全平台全版本兼容
• 【开发版本】HBuilderX - 4.14+

1.0.1（2024-04-18）

• 【优化】优化使用方式，调整api的兼容
• 【新增】缓存机制api
• 【版本兼容】全平台全版本兼容
• 【开发版本】HBuilderX - ^4.00+

1.0.0（2024-04-15）

• 【初始发布】uni-app / uni-app-x 应用程序开发的状态管理库
• 【版本兼容】全平台全版本兼容
• 【开发版本】HBuilderX - ^4.00+

平台兼容性

uni-app

uni-app x

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

简述

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

特点

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

交流反馈

官方QQ群：654105306

源码

兼容性

Vue 版本

uni-app 版本

uni-app-x 版本

mixinStore / useStore API

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

使用示例

注意：uni-app-x 与 uni-app 使用方式在于导入的差异，用法一致。

uni-app-x 示例

普通模式

<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 模式

<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 使用示例

普通模式

<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 模式

<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-app 、uniCloud、uni-app 小程序 等多平台、多元化的技术体系。
其次感谢 DCloud 插件市场 开源作品的作者们，"捧着一颗心来，不带半棵草去。" 的开源奉献精神致敬。