搜索插件、代码仓与 APP 分类

插件详情v2.3.0

vxstate

VxState 是 Flutter 的另一种状态管理解决方案。它深受 Redux 和 VueX 的启发。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
5820
喜欢数
31
Pub 分数
160

安装插件

flutter pub add vxstate

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

VxState 是一个受 Redux 和 VueX 启发的 Flutter 状态管理解决方案。它提供了一个可预测的、集中的存储来管理应用状态,采用单向数据流。设计上注重可扩展性和简洁性,支持响应式更新,并能很好地与 Flutter 的组件树集成。VxState 通过简洁的 API 和一致的模式强调清晰的架构和开发者体验。它可在所有主要平台(包括 Android、iOS、Web、macOS、Windows 和 Linux)上运行。

适合场景

  • 管理全局应用状态
  • 实现可预测的状态变更
  • 扩展大型Flutter应用
  • 与响应式 UI 集成
  • 简化复杂的状态逻辑
  • 支持跨平台应用

主要特点

  • 类似 Redux 的单向数据流
  • 受 VueX 启发的存储结构
  • 响应式状态更新
  • 跨平台兼容性
  • 简洁且极简的 API
  • 内置开发工具支持

适合对象

  • 熟悉 Redux 或 VueX 的开发者
  • 构建大规模 Flutter 应用的团队
  • 需要可预测状态管理的项目
  • 需要强大调试功能的应用程序
  • 重视一致性和结构的开发者

使用建议

  • 对初学者来说可能有更陡峭的学习曲线
  • 需要理解状态模式
  • 对于非常简单的应用来说过于复杂
  • 与流行的替代方案相比,社区资源有限
  • 不如 Provider 或 Riverpod 广泛采用

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

VxState

VxState is a state management library built for Flutter apps with focus on simplicity. It is inspired by StoreKeeper & libraries like Redux, Vuex etc with the power of streams. Here is a basic idea of how it works:

  • Single Store (Single source of truth) to keep app's data
  • Structured modifications to store with Mutations
  • Widgets listen to mutations to rebuild themselves
  • Enhance this process with Interceptors and Effects

Core of VxState is based on the InheritedModel widget from Flutter.

Getting started

Add to your pubpsec:

dependencies:
  ...
  vxstate: any

Create a store:

import 'package:vxstate/vxstate.dart';

class MyStore extends VxStore {
  int count = 0;
}

Define mutations:

class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

Listen to mutations:

@override
Widget build(BuildContext context) {
  // Define when this widget should re render
  VxState.watch(context, on: [Increment]);

  // Get access to the store
  MyStore store = VxState.store as MyStore;

  return Text("${store.count}");
}

Complete example:

import 'package:flutter/material.dart';
import 'package:vxstate/vxstate.dart';

// Build store and make it part of app
void main() {
  runApp(VxState(
    store: MyStore(),
    child: MyApp(),
  ));
}

// Store definition
class MyStore extends VxStore {
  int count = 0;
}

// Mutations
class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define when this widget should re render
    VxState.watch(context, on: [Increment]);

    // Get access to the store
    MyStore store = VxState.store as MyStore;

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Text("Count: ${store.count}"),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () {
                // Invoke mutation
                Increment();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Documentation

  • VxStore - Where your apps's data is kept
  • VxMutation - Logic that modifies Store
  • VxBuilder, VxNotifier, VxConsumer - Useful widgets for special cases
  • VxEffect - Chained mutations
  • VxInterceptors - Intercept execution of mutations

所属分类

源码仓库

使用此插件的项目