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 条评论
登录 后参与评论

相关文章

来自专栏源哥的专栏

安全套接字(https)下无法下载附件的解决方案

最近在做一个项目,里面实现一个功能,就是点击按钮后,将一段文本输出为txt附件,供用户保持。 整个功能在普通http方式访问...

724
来自专栏互扯程序

手把手教你调用百度人脸识别API

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

4689
来自专栏前端架构

详解location与history属性,replace,assign,

每次修改location的属性(hash除外),页面都会以新URL重新加载。 当通过上述任何一种方式修改URL之后,

721
来自专栏葡萄城控件技术团队

渐进式Web应用(PWA)入门教程(下)

渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的...

630
来自专栏肖洒的博客

Web(一):概述

学Python也有一段时间了,学完基本语法后整个人都蒙了。没有什么可以来练手,感觉什么也不会。 准备主攻爬虫和Web。 昨晚学长刚给讲了MVC,回来看到Pyt...

682
来自专栏张戈的专栏

启用WP Super Cache纯代码版本之后的一些优化措施

张戈博客在上个月 28 号启用了 WP Super Cache 代码版,几天下来,虽然小问题不断,但是总体感觉非常不错!不管是前台还是后台,速度都有质的提升,着...

2837
来自专栏PhpZendo

深入研究 Laravel ORM (Laravel Eloquent) 系统 (一) – 概要

本文作为 Laravel ORM 系统的研究开篇,主要对 Laravel ORM 系统的主要功能、依赖的第三方类库、系统的目录结构及对应目录所实现的功能,进行解...

502
来自专栏微信小程序开发

小程序的登录逻辑能否放在app.js中实现?

前言:做小程序开发的同学,可能都会考虑一个问题,用户登录这个方法是公用的,我们应该把这个方法放在哪里最合适呢? 看到上面的问题后,很大一部分刚入门同学都会直接...

5187
来自专栏吴伟祥

Fiddler是位于客户端和服务器端的HTTP代理(目前最常用的http抓包工具之一)

抓包工具有很多,小到最常用的web调试工具firebug,达到通用的强大的抓包工具wireshark.为什么使用fiddler?原因如下:

494
来自专栏IT派

Python入门网络爬虫之精华版

首先列举一下本人总结的相关文章,这些覆盖了入门网络爬虫需要的基本概念和技巧:宁哥的小站-网络爬虫

391

扫描关注云+社区