weex里Vuex state使用storage持久化详解


Posted in Javascript onSeptember 09, 2017

在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(_ => _)

  }

 }

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
javascript常见操作汇总
Sep 03 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
在小程序开发中使用npm的方法
Oct 17 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
js实现音乐播放控制条
Sep 09 #Javascript
You might like
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php简单统计在线人数的方法
2016/05/10 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python制作小说爬虫实录
2017/08/14 Python
Python_LDA实现方法详解
2017/10/25 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Python爬虫教程知识点总结
2020/10/19 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
医药销售求职信范文
2014/02/01 职场文书
上班迟到检讨书
2014/09/15 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL