专栏首页JadePeng的技术博客weex里Vuex state使用storage持久化

weex里Vuex state使用storage持久化

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高效沟通技巧

    高效沟通是工作中的必备技巧,本文为学习总结。 什么是沟通? 沟通是达成共识,理解一致 沟通 VS. 表达 : 沟通是双向交流,而表达是单向 沟通关键在于通,需要...

    用户1177380
  • 统一配置中心选型对比

    引入配置中心,需要考虑和现有项目的兼容性,以及是否引入额外的第三方组件。我们的java项目以SpringBoot为主,需要重点关注springboot支持性。

    用户1177380
  • Java LinqCollection 仿Linq的list常用函数

    目前支持find,findAll,sort,select,remove等,java不支持lamda函数,因此用接口代替 public interface Fun...

    用户1177380
  • 小程序云开发仿爱彼迎小程序 | 云开发实战

    目前作者只完成了主页、日期的选择及一个主题民宿页面,这附上源码地址:https://github.com/BeichenloveNancy/mpvue-airb...

    腾讯云开发TCB
  • 设计模式小议:state【转】

    转自:https://blog.csdn.net/goodboy1881/article/details/635963

    用户3033338
  • tensorflow学习笔记(三十七):如何自定义LSTM的initial state

    如何初始化LSTM的state LSTM 需要 initial state。一般情况下,我们都会使用 lstm_cell.zero_state()来获取 ini...

    ke1th
  • Chrome插件开发之隐藏页面图片

    forrestlin
  • 一次性比较目前前端最流行的状态管理,mobx,vuex,redux-saga使用方式用方式

    杭州前端工程师
  • 记一次腾讯SDK源代码审计后的CSRF攻击

    0x00 前言 初进ChaMd5安全团队,应M姐姐之邀写下这篇技术文章,这篇文章主要讲述本人近期代码审计腾讯的第三方登录SDK包时发现的一个漏洞,阅读这篇文章需...

    ChaMd5安全团队
  • FPGA按一下按键,对应端口输出单个脉冲

    对于FPGA的verilog语言,,,规定一个变量不能在多个always中被赋值.但是可以在多个alway块中做判断--结合状态机思想 module state...

    杨奉武

扫码关注云+社区

领取腾讯云代金券