Flutter跨平台存储插件stash_sembast_web的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter跨平台存储插件stash_sembast_web的使用

stash_sembast_web

stash_sembast_web 是一个为 stash 提供的存储扩展,它基于 sembast_web 存储,通过使用 msgpack 序列化格式来实现缓存项的高性能二进制序列化。

Pub Package

Coverage Status

Package Documentation

GitHub License

概述

该存储扩展为 stash 提供了基于 sembast_web 的存储,通过 msgpack 序列化格式实现了缓存项的高性能二进制序列化。

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖(或者创建它),并替换 x.x.x 为最新版本号:

dependencies:
    stash_sembast_web: ^x.x.x

然后运行以下命令以安装依赖:

dart pub get

最后,为了开始开发,导入库:

import 'package:stash/stash_api.dart';
import 'package:stash_sembast_web/stash_sembast_web.dart';

使用方法

Vault 示例

下面的例子展示了如何创建一个使用 sembast_web 存储后端的 Vault。在这个简单的例子中,序列化和反序列化对象是由手写的,但通常会使用像 json_serializable 这样的库。

import 'package:stash/stash_api.dart';
import 'package:stash_sembast_web/stash_sembast_web.dart';

class Task {
  final int id;
  final String title;
  final bool completed;

  Task({required this.id, required this.title, this.completed = false});

  /// 创建一个 Task 对象从 json map
  factory Task.fromJson(Map<String, dynamic> json) => Task(
      id: json['id'] as int,
      title: json['title'] as String,
      completed: json['completed'] as bool);

  /// 创建一个 json map 从一个 Task 对象
  Map<String, dynamic> toJson() =>
      <String, dynamic>{'id': id, 'title': title, 'completed': completed};

  [@override](/user/override)
  String toString() {
    return 'Task $id, "$title" is ${completed ? "completed" : "not completed"}';
  }
}

void main() async {
  // 创建一个存储
  final store = await newSembastWebVaultStore();

  // 使用之前创建的存储创建一个 Vault
  final vault = await store.vault<Task>(
      name: 'vault', 
      fromEncodable: (json) => Task.fromJson(json),
      eventListenerMode: EventListenerMode.synchronous)
    ..on<VaultEntryCreatedEvent<Task>>().listen(
        (event) => print('Key "${event.entry.key}" added to the vault'));

  // 将具有键 'task1' 的任务添加到 Vault
  await vault.put(
      'task1', Task(id: 1, title: 'Run vault store example', completed: true));
  // 从 Vault 中检索值
  print(await vault.get('task1'));
}

Cache 示例

下面的例子展示了如何创建一个使用 sembast_web 存储后端的 Cache。在这个简单的例子中,序列化和反序列化对象是由手写的,但通常会使用像 json_serializable 这样的库。

import 'package:stash/stash_api.dart';
import 'package:stash_sembast_web/stash_sembast_web.dart';

class Task {
  final int id;
  final String title;
  final bool completed;

  Task({required this.id, required this.title, this.completed = false});

  /// 创建一个 Task 对象从 json map
  factory Task.fromJson(Map<String, dynamic> json) => Task(
      id: json['id'] as int,
      title: json['title'] as String,
      completed: json['completed'] as bool);

  /// 创建一个 json map 从一个 Task 对象
  Map<String, dynamic> toJson() =>
      <String, dynamic>{'id': id, 'title': title, 'completed': completed};

  [@override](/user/override)
  String toString() {
    return 'Task $id, "$title" is ${completed ? "completed" : "not completed"}';
  }
}

void main() async {
  // 创建一个存储
  final store = newSembastWebCacheStore();

  // 使用之前创建的存储创建一个容量为 10 的 Cache
  final cache = store.cache<Task>(
      name: 'cache1',
      fromEncodable: (json) => Task.fromJson(json),
      maxEntries: 10,
      eventListenerMode: EventListenerMode.synchronous)
    ..on<CacheEntryCreatedEvent<Task>>().listen(
        (event) => print('Key "${event.entry.key}" added to the cache'));

  // 将具有键 'task1' 的任务添加到 Cache
  await cache.put(
      'task1', Task(id: 1, title: 'Run cache store example', completed: true));
  // 从 Cache 中检索值
  print(await cache.get('task1'));
}

更多关于Flutter跨平台存储插件stash_sembast_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter跨平台存储插件stash_sembast_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用stash_sembast_web插件进行跨平台存储的代码示例。stash_sembast_webstash生态系统的一部分,它允许你在Web平台上使用sembast数据库进行数据存储。

首先,确保你的pubspec.yaml文件中包含了必要的依赖项:

dependencies:
  flutter:
    sdk: flutter
  stash: ^3.0.0  # 请检查最新版本号
  stash_sembast: ^3.0.0  # 请检查最新版本号
  stash_sembast_web: ^3.0.0  # 请检查最新版本号

然后,运行flutter pub get来获取这些依赖项。

接下来,你可以在你的Flutter应用中使用这些库。以下是一个简单的示例,展示如何初始化存储、保存和读取数据。

import 'package:flutter/material.dart';
import 'package:stash/stash_api.dart';
import 'package:stash_sembast/stash_sembast.dart';
import 'package:stash_sembast_web/stash_sembast_web.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stash Sembast Web Example'),
        ),
        body: Center(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Cache _cache;

  @override
  void initState() {
    super.initState();
    _initCache();
  }

  Future<void> _initCache() async {
    // 初始化 Sembast 存储在 Web 平台上的配置
    var sembastStoreFactory = SembastStoreFactory(
      databaseFactory: databaseFactoryWeb,
    );

    // 创建缓存实例
    var cacheFactory = CacheFactory()
      ..registerStoreFactory('sembast', sembastStoreFactory);

    _cache = await cacheFactory.build(
      name: 'my_cache',
      config: CacheConfig(
        store: StoreConfig(
          name: 'my_store',
          backend: 'sembast',
        ),
      ),
    );

    // 打开缓存(如果需要的话)
    await _cache.open();
  }

  Future<void> _saveData(String key, String value) async {
    await _cache.write(key: key, value: value);
  }

  Future<String?> _readData(String key) async {
    var entry = await _cache.read(key: key);
    return entry?.value as String?;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () async {
            await _saveData('example_key', 'Hello, World!');
            setState(() {}); // 更新UI(虽然这里没有直接显示数据)
          },
          child: Text('Save Data'),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            var data = await _readData('example_key');
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Data: $data'),
              ),
            );
          },
          child: Text('Read Data'),
        ),
      ],
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. 配置依赖项:在pubspec.yaml中添加stashstash_sembaststash_sembast_web
  2. 初始化存储:在_initCache方法中,我们使用SembastStoreFactory并指定databaseFactoryWeb来适配Web平台。然后,我们创建一个Cache实例并打开它。
  3. 保存和读取数据:提供_saveData_readData方法来分别保存和读取数据。
  4. UI交互:在UI中提供两个按钮,一个用于保存数据,另一个用于读取数据并显示结果。

这个示例展示了如何在Flutter Web应用中使用stash_sembast_web进行跨平台存储。根据你的具体需求,你可以进一步扩展这个示例。

回到顶部