weex里Vuex state使用storage持久化

在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state。

先看下该模块介绍:

storage 是一个在前端比较常用的模块,可以对本地数据进行存储、修改、删除,并且该数据是永久保存的,除非手动清除或者代码清除。但是,storage 模块有一个限制就是浏览器端(H5)只能存储小于5M的数据,因为在 H5/Web 端的实现是采用 HTML5 LocalStorage API。而 Android 和 iOS 这块是没什么限制的。

首先,引入模块:

const storage = weex.requireModule('storage')

定义state

var state = {
    banner:[],
    activeTabIndex:0,
    lists: {
        searchList:[],
        tabColumns: {
            new:[],
            hot:[],
            select:[]
        },
        items:[]
    }
}

初始化时,从storage加载state数据

// 从storage里加载数据
storage.getItem(STORAGE_KEY, event => {
  if (event.result == "success" && event.data){
      // 这里可以使用extend等方法,这里仅举例说明
      var data = JSON.parse(event.data);
      state.banner = data.banner;
      state.activeTabIndex = data.activeTabIndex;
  }
})

关键来了,如何存储?Vuex提供了插件机制,我们可以通过插件订阅state的每一次更改,在更改的时候保存我们感兴趣的就OK了

// 存储plugin,存储感兴趣的数据,store里数据太多,没必要全持久化
const storagePlugin = store => {
  store.subscribe((mutation, {activeTabIndex,banner}) => {
    storage.setItem(STORAGE_KEY, JSON.stringify({activeTabIndex,banner}),event => {
      console.log('cache success');
    })
  })
}

最后,创建Vuex,大功告成

const store = new Vuex.Store({
  actions,
  mutations,
  plugins:[storagePlugin],

  state: state,

  getters: {
    // ids of the items that should be currently displayed based on
    // current list type and current pagination
    activeIds (state) {
      const { activeType, lists, counts } = state
      return activeType ? lists[activeType].slice(0, counts[activeType]) : []
    },

    // items that should be currently displayed.
    // this Array may not be fully fetched.
    activeItems (state, getters) {
      return getters.activeIds.map(id => state.items[id]).filter(_ => _)
    }
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏点点滴滴

ovz CentOS主机安装BBR内核

8333
来自专栏李蔚蓬的专栏

关于Android Studio中Run按钮是灰色的解决

今天导入一个别人的项目,在导入之前是老方法,覆盖  了三个关键文件之后(.gradle文件夹的内容版本若与本地不一,也应删掉),重启AS;

1.2K2
来自专栏技术博文

centos7精简安装后使用发现没有killall命令

centos7精简安装后,使用中发现没有killall命令。 经查找,可以通过以下命令解决: yum install psmisc 简单介绍一下 psmisc ...

2513
来自专栏漏斗社区

工具 | w3af系列安装篇(一)

W3af是一个基于Python的Web应用扫描器,本期我们将来唠一唠w3af的安装和使用。 ? 在windows上安装 ‍‍‍‍‍ 官网的最新版本已经不提...

3657
来自专栏守望轩

Visual Studio 2008 每日提示(十七)

#161、在解决方案里显示(或不显示)编辑器中打开的文件 原文链接:How to have the Solution Explorer always show...

3428
来自专栏听雨堂

ASP.NET调用word开发环境下正常,iis下报错

检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 800...

1856
来自专栏游戏杂谈

设置Flex中Tree组件默认选中一项

项目中需要用到tree这个组件,但我在做产品的过程中想让程序默认选中tree组件中的某一节点。之前用到的flex的sdk是3.4版本,在使用selectIte...

905
来自专栏一“技”之长

配置Sublime Text工具运行JavaScript代码

    SublimeText是一款及强大的跨平台编辑器,其丰富的插件可以帮助开发者编写各种语言的代码。并且其自带控制台,开发者实现简单的配置即可在Sublim...

802
来自专栏Mamba

PHP开发个人博客

2435
来自专栏吴伟祥

Jmeter压力测试 转

 它的作用其实是为了模拟用户,所以也叫Users。一个线程组模块可以包含多个线程,每个线程代表一个用户,这样可以模拟高并发下的请求,并根据网站的响应信息来判断网...

892

扫码关注云+社区