weex里Vuex state使用storage持久化
时间:2022-05-03
本文章向大家介绍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(_ => _)
}
}
})
- iftop实时网络流量监控工具的安装使用
- hdu 3908 Triple(组合计数、容斥原理)
- hdu 4034 Graph (floyd的深入理解)
- hdu 4033Regular Polygon(二分+余弦定理)
- Debian8配置SSH允许root登陆
- hdu 4405Aeroplane chess(概率DP)
- hdu 3853LOOPS (概率DP)
- cf(#div1 B. Dreamoon and Sets)(数论)
- hdu 1805Expressions(二叉树构造的后缀表达式)
- 清空messages没有权限的解决方法
- hdu1710(Binary Tree Traversals)(二叉树遍历)
- 基本线程同步(一) 同步方法
- uva514(trail)(模拟栈)
- zoj3822 Domination(概率dp)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题
- 基于自定义Toast全面解析
- Android中DialogFragment自定义背景与宽高的方法
- Android 常用log 关键字
- Android PopWindow 设置背景亮度的实例
- ubuntu20.04设置静态ip地址(包括不同版本)
- LayoutAnimation给ListView中的item设置动态出场效果(实例)
- android studio2.3如何编译动态库的过程详解
- Android RecyclerView设置下拉刷新的实现方法
- Android 动态添加view或item并获取数据的实例
- Centos7实现MySQL基于日志还原数据的示例代码
- Android 三种延迟操作的实现方法
- 基于Android在布局中动态添加view的两种方法(总结)
- Android向node.js编写的服务器发送数据并接收请求
- Android startActivityForResult和setResult的区别