针对特定用例在 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。 对我来说，最大的好处是业务逻辑封装。 如果不这样做，您的特定数据库逻辑将遍布表示层，如果您想更改某些内容，您将遇到麻烦:)

这是一篇关于提供者的好文章。