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 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

thinkjs学习笔记

thinkjs 开始 安装 npm install -g thinkjs-cmd 查看是否安装成功 thinkjs -v 新建项目 mkdir new_dir_...

1966
来自专栏Golang语言社区

使用Beego+Swagger构建更好的API服务

题图 By NewYorker From Twitter 一. 更好的API服务 在你已经在工作中写了很多版本,很多规范的API服务之后,你会发现,后端服务很多...

40011
来自专栏后端之路

网页慢!谁的锅?

背景 出于对google的尊重,许多面试官都喜欢问这样的问题。从你在浏览器键入www.google.com 到页面最终渲染出来 期间究竟发生了什么? 当然现在也...

2585
来自专栏张戈的专栏

WordPress给文章添加百度是否已收录查询和显示功能(自定义栏目优化版)

文章页面显示百度是否收录这个功能在张戈博客已经测试有一段时间了。最开始的代码也是从网络上找的,只是自己用,所以也就没想着分享了,毕竟是人家的成果,而且自行百度也...

3063
来自专栏c#开发者

NHibernate实践与模式

NHibernate实践与模式 NHibernate是一款非常优秀的O/R mapping的开源框架,再还没有.net的时候它已经存在于java环境中。 下面我...

2734
来自专栏哲学驱动设计

使用 MarkDown & DocFX 升级 Rafy 帮助文档

1412
来自专栏phodal

如何设计完善的构建系统,为日常开发提速一倍

在搭建开发环境的构建系统时,我们关注二点: 提高效率,对于大部分事务的自动化,如自动编译代码、自动重启服务。 代码质量,编码完成时,我们则转而关注于代码的质量。...

1757
来自专栏Android小菜鸡

Android FrameWork层框架

  Android的四层架构相比大家都很清楚,老生常谈的说一下分别为:Linux2.6内核层,核心库层,应用框架层,应用层。我今天重点介绍一下应用框架层Fram...

803
来自专栏向治洪

Rest api简介

理解和使用内容协商 我们的开发者在发送一个 REST API 请求的同时,根据应用场景,针对相同的资源,可能会期待不同的返回形式。 比如,我希望根据用户客户端语...

1976
来自专栏Python中文社区

一个多线程知乎用户爬虫的实现

專 欄 ❈默然,Python中文社区专栏作者。 博客:https://www.zhihu.com/people/moranzcw GitHub:https:/...

2235

扫码关注云+社区