weex里Vuex state使用storage持久化详解
在weex里使用Vuex作为state管理工具，问题来了，如何使得state可以持久化呢？weex官方提供store模块，因此我们可以尝试使用该模块来持久化state。
先看下该模块介绍：
storage是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者代码清除。但是，storage模块有一个限制就是浏览器端（H5）只能存储小于5M的数据，因为在H5/Web端的实现是采用HTML5LocalStorageAPI。而Android和iOS这块是没什么限制的。
首先，引入模块：
conststorage=weex.requireModule('storage')
定义state
varstate={
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等方法，这里仅举例说明
vardata=JSON.parse(event.data);
state.banner=data.banner;
state.activeTabIndex=data.activeTabIndex;
}
})
关键来了，如何存储？Vuex提供了插件机制，我们可以通过插件订阅state的每一次更改，在更改的时候保存我们感兴趣的就OK了
//存储plugin，存储感兴趣的数据，store里数据太多，没必要全持久化
conststoragePlugin=store=>{
store.subscribe((mutation,{activeTabIndex,banner})=>{
storage.setItem(STORAGE_KEY,JSON.stringify({activeTabIndex,banner}),event=>{
console.log('cachesuccess');
})
})
}
最后，创建Vuex，大功告成
conststore=newVuex.Store({
actions,
mutations,
plugins:[storagePlugin],
state:state,
getters:{
//idsoftheitemsthatshouldbecurrentlydisplayedbasedon
//currentlisttypeandcurrentpagination
activeIds(state){
const{activeType,lists,counts}=state
returnactiveType?lists[activeType].slice(0,counts[activeType]):[]
},
//itemsthatshouldbecurrentlydisplayed.
//thisArraymaynotbefullyfetched.
activeItems(state,getters){
returngetters.activeIds.map(id=>state.items[id]).filter(_=>_)
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。