相思资源网 Design By www.200059.com
"htmlcode">
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(_ => _) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无weex里Vuex state使用storage持久化详解的评论...