npm 包 cerebral-provider-storage 使用教程

介绍

Cerebral 是一种流程状态管理器。它为 Web 应用程序提供了一个集中式的、可预测的管理状态的方法，并通过进行应用程序中的任何操作来更新状态，可以使应用程序变得更加健壮和可维护。Cerebral 库有很多 provider ，其中 cerebral-provider-storage 用于屏蔽 Web 存储的底层细节，提供了一种简单的方式来在浏览器的本地存储里存储和访问应用程序的状态。

安装

通过 npm 安装 cerebral-provider-storage：

--- - -------------------------

使用方法

在使用 cerebral-provider-storage 之前需要安装和配置 Cerebral 库。安装和配置详见 Cerebral 官网。完成配置后，继续如下操作：

------ - ---------- - ---- -----------
------ -------- ---- --------------------
------ --------------- ---- ----------------------------

----- ---------- - ------------
  --------- ----------
    ----- ----------------
  ---
  ---------- -
    -----------------
      ------- -------------------
    --
  --

  ------ -
    -- ---
  --
  -------- -
    -------- ---
    ----------- ---
    -- ----
  -
---

配置项

  • target: 确定要使用的 Web 存储的类型。

    StorageProvider({ target: window.localStorage })

    or

    StorageProvider({ target: window.sessionStorage })

    默认值是 window.localStorage。

  • sync: 确定某个信号是否应该覆盖存储中的项。如果值为 true，则会将从存储中检索的数据合并到应用程序。

    StorageProvider({ sync: true })

    默认值为 false。

在组件中使用

------ - ------- - ---- ------------------
------ - ----- - ---- ----------------

------ ------- --------
  -
    ------ ------------
  --
  -------- ----- ----- -- -
    ------ -
      -----
        --------------- -- -
          ---- --------------------------------
        ---
      ------
    --
  -
--

存储和检索状态

在信号中配置存储状态，并在组件中使用 state 获取它们。

------ - --- - ---- ---------------------
------ - ----- - ---- ----------------
------ - -- ---- ---- ----------

------ ----- ------- - -
  -- ---- ----
  --------------------------- -
    ------ -- --- ------
    ----- -----
  --
--

------ ----- ---------- - -
  -- ---- --------------- -------
  ------------ ---
--

完整示例

------ ----- ---- --------
------ - ------ - ---- ------------
------ - ---------- - ---- -----------
------ -------- ---- --------------------
------ - --- - ---- ---------------------
------ - ----- - ---- ----------------
------ - ------- - ---- ------------------
------ --------------- ---- ----------------------------
------ - -- ---- ---- ----------

----- ---------- - ------------
  --------- ----------
    ----- ----------------
  ---
  ---------- -
    -----------------
      ------- --------------------
      ----- ----
    --
  --

  ------ -
    ------ --
  --
  -------- -
    -------- -
      -- ---- ----
      --------------------------- -
        ------ -- --- ------
        ----- -----
      --
    --
    ----------- -
      -- ---- --------------- -------
      ------------ ---
    -
  -
---

----- --- - --------
  -
    ------ ------------
  --
  -------- ----- ----- -- -
    ------ -
      -----
        ------- ----------- -- -------------------------------------- -------------
        ------- ----------- -- ------------------------------------------- --------------
        --------------------------- -- -
          ---- ----------------------------------
        ---
      ------
    --
  -
--

----------- --- ---------------------------------

总结

cerebral-provider-storage 这个库非常方便，能够很好的解决 Web 存储的诸多问题，同时它也遵循了 Cerebral 的定义，面向状态管理的功能很强大，而且也很容易上手。当然使用前需要 Sci-Fi 网络，以保证良好使用体验。更多 Cerebral 库的使用方法可参考官方提供的文档。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e281e8991b448d7740

阅读全文

猜你喜欢

  • npm 包 web-stub 使用教程

    Web-stub 是一个前端开发中的实用 npm 包。它可以帮助我们快速 Mock 接口并且让我们的页面、组件等调试开发更为轻松。 前置知识 在使用 web-stub 之前，我们需要先了解以下知识点：...

    2 年前
  • npm 包 eslint-config-standard2 使用教程

    在前端开发过程中，我们往往需要使用到许多第三方依赖库与插件，其中 eslint-config-standard2 是一个优秀的 npm 包，为我们提供了一种良好的前端代码检查解决方案，它基于标准的 J...

    2 年前
  • npm 包 gulp-wrong 使用教程

    简介 gulp-wrong 是一个基于 Gulp 的自动化构建工具，它能够自动化地完成文件的编译、压缩、打包等操作。该工具非常适用于前端项目的构建和打包工作。 安装 使用该工具需要先安装 Node.j...

    2 年前
  • npm 包 standard2 使用教程

    介绍 standard2 是基于 standard 的一个 npm 包，是一种开源的 JavaScript 代码规范。标准化使得团队能够很容易地更快地理解对方的代码。

    2 年前
  • npm 包 arma-config-parser 使用教程

    前言 本文主要介绍 npm 包 arma-config-parser 的使用教程。arma-config-parser 是一个用于解析 Arma 3 服务器配置文件的 npm 包。

    2 年前
  • npm 包 durandal-redux-typescript 使用教程

    引言 在前端开发过程中，我们常常需要使用一些第三方包来实现一些功能。而为了方便开发，我们往往会选择使用一些成熟的包，比如 Redux 和 Durandal。同时，TypeScript 也越来越受到前端...

    2 年前
  • npm 包 my-ml-curve-fitting 使用教程

    介绍 my-ml-curve-fitting 是一个 npm 包，用于曲线拟合，支持多项式和指数曲线拟合。 这个包的目的是让前端开发者能够在 JavaScript 中使用曲线拟合算法，快速有效地逼近数...

    2 年前
  • npm 包 pov-components 使用教程

    前言 npm 是一个 JavaScript 的包管理器，提供了很多方便快捷的模块和工具供开发者使用。pov-components 是一个基于 Vue.js 的开源组件库，包含了常用的 UI 组件和一些...

    2 年前
  • npm 包 require-indexify 使用教程

    前言 在前端开发中，使用第三方的库和组件十分常见，而这些第三方库又往往依赖于其他的第三方库。在项目开发过程中，维护这些依赖关系会变得十分繁琐，为了避免这种情况，可以使用 npm 包 require-i...

    2 年前
  • npm 包 reaqt 使用教程

    如果你是一名前端开发者，你一定会遇到构建 React 应用的情况。虽然 React 在构建应用方面表现出色，但是对于国际化和本地化的支持却比较薄弱。 幸运的是，有一个叫做 reaqt 的 npm 包可...

    2 年前
  • npm 包 goos 使用教程

    简介 goos 是一个专为前端开发者打造的工具集合，提供了一系列方便实用的工具，如表单验证等。通过使用 goos，我们可以快速地实现一些常见的功能，避免在项目中重复造轮子。

    2 年前
  • npm 包 monk-middleware-dereference 使用教程

    概述 在前端开发过程中，我们常常需要和数据库打交道。其中，MongoDB 是一种常用的高性能文档数据库。在 MongoDB 中，我们可以使用 Monk 这个库来简化 MongoDB 的操作。

    2 年前
  • npm 包 latin-to-cyrillic 使用教程

    在前端开发中，有时候需要将拉丁字母转化为西里尔字母。npm 包 latin-to-cyrillic 就是帮助我们完成这个任务的工具。 本文将为大家介绍 latin-to-cyrillic 的使用教程，...

    2 年前
  • npm 包 puckages 使用教程

    在前端开发中，我们经常需要通过引入一些第三方包使我们的开发效率更高。而 npm 包管理器是我们经常使用到的一个工具，通过 npm 我们可以快速方便地安装和使用各种各样的前端插件和工具。

    2 年前
  • npm 包 keymirror-flow 使用教程

    前言 在前端开发中，我们经常需要使用常量，而常量的定义和使用又需要注意一些规范。为了方便前端开发者，社区中出现了大量的 npm 包来解决这个问题。其中一个较为常用的包就是 keymirror-flow...

    2 年前
  • npm 包 accel 使用教程

    什么是 accel ? accel 是一个用于优化 JavaScript 数组运算的 npm 包，可以大大提高计算数组的速度。它支持并行化计算，可以使得数组运算更加高效。

    2 年前
  • npm 包 generator-ko-component-page 使用教程

    简介 generator-ko-component-page 是一个 npm 包，它可以帮助前端工程师快速生成 ko 项目的组件页面，让开发者更加专注于组件的开发。

    2 年前
  • npm 包 angularjs-google-chart 使用教程

    在前端开发中，数据可视化是一个非常重要的部分。Google Charts 是一款强大的数据可视化库，支持各种常见的图表类型，如折线图、柱状图、饼图等。而 angularjs-google-chart ...

    2 年前
  • npm 包 brightness-toggle 使用教程

    在前端开发中，我们常常需要对页面进行亮度调节。为了方便开发者，npm 社区中出现了一款名为 brightness-toggle 的 npm 包，它可以帮助我们非常方便地实现页面亮度的调节。

    2 年前
  • npm 包 react-statify 使用教程

    简介 react-statify 是一个 React 组件库，可以帮助前端开发者很容易地展示数据的统计信息。与其他的图表库相比，react-statify 更加轻便、易于使用，并且能够提供更具有信息量...

    2 年前

相关推荐

    暂无文章