FLUTTER ECOSYSTEM

iampawan/VxState

另一種狀態管理解決方案

VxState 專案封面
Stars
43
Forks
8
最近推送(UTC)
2023年11月23日
專案狀態
未封存
Pawan Kumar GitHub avatar
GITHUB User

Pawan Kumar ↗

Empowering People | AI | Flutter | 140K+ Youtube ▶️ | 60K+ Linkedin | 40K+ Twitter | 10K+ Github 👨🏻‍💻 | Google Developer Expert | Building Tools 🚀

CodepurFaridabad, India官方網站 ↗
語言DartHTMLRubySwiftKotlinObjective-C

技術主題

此儲存庫發佈的套件

使用的依賴

依賴清單 2 項
  • flutter{"sdk":"flutter"}
  • flutter_test開發依賴{"sdk":"flutter"}

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 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