搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案