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 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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 空格,换行,跳格使用说明
2009/12/18 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
浅谈Python单向链表的实现
2015/12/24 Python
Python基础篇之初识Python必看攻略
2016/06/23 Python
python设计模式大全
2016/06/27 Python
python 全局变量的import机制介绍
2017/09/07 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python简单区块链模拟详解
2019/07/03 Python
django框架cookie和session用法实例详解
2019/12/10 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python中doctest库实例用法
2020/12/31 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
美发活动策划书
2014/01/14 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
儿园租房协议书范本
2014/12/02 职场文书
党员争先创优承诺书
2015/01/20 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
golang中的struct操作
2021/11/11 Golang
Python实现自动玩连连看的脚本分享
2022/04/04 Python
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript