針對特定用例在 flutter 的不同頁面上維護相同的 state

Question

我知道 flutter 中的 state 管理存在某些問題，但似乎都沒有解決我的用例。

最近我正在構建一個基於電子商務的應用程序，並遇到了對 state 管理的真正需求。 我有2頁，

1. 一個是產品頁面，我在其中將產品添加到購物車。
2. 第二個是購物車頁面，我看到最近添加到購物車的產品。

用戶可以將產品添加到購物車，然后導航到購物車。 在購物車頁面中，他們還可以增加或減少商品的數量。

如您所見，最初黃色項目以數量 3 添加到購物車，但在購物車頁面中，用戶按下 (-) 按鈕並將數量減少到 1。現在如果用戶按下后退按鈕，則 state 的黃色產品在產品頁面上仍將是 3。 與粉紅色產品類似的情況。

因此，我嘗試使用普通的 setState 和一些全局數據結構來解決這個問題，以跟蹤數量。 但是隨着我的應用程序變大，在頁面上維護 state 真的很難。 我已經閱讀了不同的 state 管理解決方案，例如 redux、BloC 模式、提供者……但我不清楚如何在我的用例中使用它們中的任何一個。 任何有經驗的人，可以分解岩石並幫助我消化嗎？

任何有關如何解決此問題的示例代碼和解釋將不勝感激！

希望我的問題很清楚！

Answer 1

ANUP SAJJAN可以使用Provider package 來實現這一點。 根據您的情況查看這些代碼示例：

import 'package:flutter/material.dart';

import 'models/cartmodel.dart';

class AppState with ChangeNotifier {
  List<CartModel> _cartModel = new List<CartModel>();

  // Cart data list
  List<CartModel> get getCart => _cartModel;

  // Add item to cart
  addToCart(CartModel value) {
    _cartModel.add(value);
    notifyListeners();
  }

  // Remove item to cart
  removeToCart(CartModel value) {
    _cartModel.remove(value);
    notifyListeners();
  }
}

在main.dart中創建一個實例：

runApp(
  ChangeNotifierProvider<AppState>(
      create: (_) => AppState(),
      child: MyApp(),
    ),
)

您現在可以控制 state：

@override
Widget build(BuildContext context) {
  final appState = Provider.of<AppState>(context);
  ...
  // manipulation
  appState.getCart
  appState.addToCart(value)
  appState.removeToCart(value)
  ...
}

Answer 2

state實際上是一個控制一個屏幕的state的工具，而不是一個數據存儲。 在這種情況下，您可能不應該使用 State，而應該使用數據庫。 當用戶編寫他們的購物車時，您可以在用戶的設備 SQLite 或雲端（Firebase？）中創建購物車記錄。 起初這可能看起來有點過頭了，但考慮到除了擁有可以從任何地方訪問的持久存儲之外，您還可以獲得用戶行為數據，即他們添加了什么、他們如何進行以及有多少人離開了。

至於這方面的技術方面，在 Flutter 中，通常使用 Providers。 對我來說，最大的好處是業務邏輯封裝。 如果不這樣做，您的特定數據庫邏輯將遍布表示層，如果您想更改某些內容，您將遇到麻煩:)

這是一篇關於提供者的好文章。