杀手阿一 下载,大片网站,绝焰焚天
在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(_ => _)
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论