weex里Vuex state使用storage持久化详解_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 03:10:37 点击率：次

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

  }

 }

})

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

# weex # storage # 持久化 # 使用vuex存储用户信息到localStorage的实例 # Vue项目使用localStorage+Vuex保存用户登录信息 # mpvue中配置vuex并持久化到本地Storage图文教程解析 # Vuex结合storage实现用户信息本地存储方式 # 来了 # 感兴趣 # 我们可以 # 是一个 # 加载 # 太多 # 大功告成 # 可以使用 # 这块 # 没必要 # 先看 # 大家多多 # 有一个 # 举例说明 # 没什么 # banner # var # tabColumns # searchList # lists

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：途游邹轶：中小公司的运维怎么做？

下一篇：网站服务器为何频现500内部错误？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：途游邹轶：中小公司的运维怎么做？

下一篇：网站服务器为何频现500内部错误？