weex里Vuex state使用storage持久化详解

weex里Vuex state使用storage持久化详解

在weex里使用vuex作为state管理工具，问题来了，如何使得state可以持久化呢？weex官方提供store模块，因此我们可以尝试使用该模块来持久化state。

先看下该模块介绍：

storage 是一个在前端比较常用的模块，可以对本地数据进行存储、修改、删除，并且该数据是永久保存的，除非手动清除或者llGSaYTZ代码清除。但是，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

allGSaYTZctiveIds (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 fuhttp://lly fetched.

activeItems (state, getters) {

return getters.activeIds.map(id => state.items[id]).filter(_ => _)

}

}

})

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。