欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-28 23:49:01
在weex里使用vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化...

在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(_ => _)

  }

 }

}) 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。