js 操作vuex数据_Vuex 数据状态持久化如何处理?
点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
在前面文章中,我们详细的讲述了Vuex相关的知识,没有了解的小伙伴可以先去了解一波: 《Vuex是什么?Vuex能做什么?Vuex怎么使用?》
Vuex+localStorage数据状态持久化
这篇文章主要是讲讲如何使Vuex数据持久化?
顾名思义,浏览器想要数据持久化,必须用到localStorage或者sessionStorage,可能还有不知道这两个东西是干什么的小伙伴,简单的说一下:
localStorage和sessionStorage都可以将数据保存到浏览器上。localStorage不会过期,除非清除或者大小超出,sessionStorage一旦浏览器关闭就会被清除。
Vuex 和 localStorage或者sessionStorage如何结合到一起了???
store插件介绍
这里我们用了一个名叫store的插件,当然不用也是可以的,不过都得自己来写set、get略微麻烦一写。 store的插件就是把Storage的set、get等封装,使用起来更方便。
自2.x以来,功能也是越来越强大
// === store(key, data); store.set(key, data[, overwrite]); // === store({key: data, key2: data}); store.setAll(data[, overwrite]); // === store(key); store.get(key[, alt]); // === store(); store.getAll([fillObj]); // === store(key, fn[, alt]); store.transact(key, fn[, alt]); // === store(false); store.clear(); // returns true or false store.has(key); // removes key and its data, then returns the data store.remove(key); // fn receives key and data (or fill), return false to exit early store.each(fn[, fill]); // concats, merges, or adds new value into existing one store.add(key, data); // returns array of keys store.keys([fillList]); // number of keys, not length of data store.size(); // clears *ALL* areas (but still namespace sensitive) store.clearAll();
下面来看看具体使用示例
storage文件示例
Vuex+localStorage数据状态持久化
新建一个storage.js文件
import storage from 'store'; // 缓存数据的key const WEB_NAME = 'WEB_NAME'; export const storage = { set setLocalStorageName(val) { if (!val) { storage.remove(WEB_NAME); } else { storage.set(WEB_NAME, val); } }, get getLocalStorageName() { return storage.get(WEB_NAME); } }
store文件示例
新建一个store.js文件,同时引入上面的storage.js文件
import Vue from 'vue' import Vuex from 'vuex' import { storage } from './storage'; Vue.use(Vuex) const store = new Vuex.Store({ state: { // 默认读取storage里面的数据 name: storage.setLocalStorageName || '' }, mutations: { setData (state, data) { // 拿到数据有,向state和storage里面都放入数据 state.name = data storage.setLocalStorageName = data; } }, actions: { getData ({ commit, state }, params) { let name = 'web秀 Vuex+localStorage数据状态持久化'; commit('name', name) } }) export default store
这样在使用Vuex state的时候,强制刷新页面等操作都不会清除name值,只有手动清除火车set 空值进去才可以清除name了。
Vuex数据状态持久化的使用场景
Vuex+localStorage数据状态持久化
1、购物车 比如你把商品加入购物车后,没有保存到后台的情况下,前端来存,就可以通过这种方式。
2、会话状态 授权登录后,token就可以用Vuex+sessionStorage来存储。
3、一些不会经常改变的数据 比如城市列表等(当前也要留下可以更新的入口,比如版本号)
总结
Vuex数据持久化是不是很简单了?确实是不费多大劲就可以搞定了。多自己动手实践一下,可以更快的掌握哦。
上面说的不用store的插件也是可以的,怎么解决了?只需要将store.js文件里面用到storage的地方换成对应的get、set即可。
小提示:localStorage.setItem(key, String), set的值必须是字符串,如果你的数据是对象都需要先行转换(JSON.stringify(xxx)),取出时localStorage.getItem(key),如果不是字符串,取出后可以通过JSON.parse(xxx)转回对象。
公告
为了感谢大家一直以来的支持,小编发起了抽奖活动,大家可以去参与,转发抽奖活动和关注小编即可参与,抽出5名小伙伴每人20元话费奖励。再次感谢大家的支持。
js 操作vuex数据_Vuex 数据状态持久化如何处理?相关推荐
- layui复选框:被js操作checked切换并显示状态(含案例、代码)
文章目录 layui复选框:被js操作checked切换并显示状态 (含案例.代码) 案例 · 应用 · 截图: 案例 · 代码: 背景 · 设置: 使用说明: layui复选框:被js操作check ...
- js 操作vuex数据_Vue.js中使用Vuex实现组件数据共享案例
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --sav ...
- js 操作vuex数据_vue中使用vuex(超详细)
vuex是使用vue中必不可少的一部分,基于父子.兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公 ...
- js 操作vuex数据_请教个有关 Vue.js 使用 Nuxt.js 服务端渲染,使用 Vuex 取数据的时候报错...
查过资料没有什么结果,首先怀疑的是 SSR 的问题,但是简单的测试感觉不是 SSR 的问题.没有找到原因,希望在这里能得到解惑! 使用 Nuxt.js 做服务端渲染,前后端分离,Token 存储在 l ...
- 操作vuex中的数据报错 Do not mutate vuex store state outside mutation handlers
上一篇博客有提到直接改变vuex中的值会报错,现在详细记录一下这个错误,首先看一下错误 这是因为直接操作vuex中的数据没有通过mutations去更新state而报的错误,如果在一个组件中初始化数据 ...
- vuex状态持久化_Vuex数据状态持久化
vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据状态持久化,也可以通过插件vuex-persistedstate. 1.手动利用 ...
- vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
- js操作json数据的一些感受
最近在搞 json 数据传输,直接用的 javascript 对数据进行操作.json数据为: var json ={ "global":"200", &quo ...
- ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
本文实例讲述了jquery+ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,&q ...
最新文章
- SSMSSH项目中 springmvc 乱码问题解决
- 2021高考成绩各科各题得分查询,2021年新疆高考分数一分一段位次表,新疆高考个人成绩排名查询方法...
- 埃洛等级分系统【转自百度百科】
- ubuntu系统下创建软件桌面快捷方式
- 远程唤醒linux系统方法
- Javascript:前端利器 之 JSDuck
- linux编写复制脚本程,常用的Shell脚本
- Wireshark工作笔记-对TCP连接与断开以及数据传输的实战分析
- promise原理—一步一步实现一个promise
- mysql 导出dmp文件_PLSQL Developer导入导出表数据结构
- 《玩转Django2.0》读书笔记-编写URL规则
- [Flex]Flex3.0 Beta3下载地址
- paip.c#.net 设置窗体关闭提醒
- 注解的引入以及注解的使用
- 控制台 钢铁雄心2_钢铁雄心2中共事件代码 | 手游网游页游攻略大全
- MATLAB 只是冰山一角!海外资深程序员聊被卡脖子……
- 苹果iphone5/iphone5s充电器(A1443)及电路原理图
- vue脚手架根据需要进行配置
- 奇葩需求系列-距离明天十二点倒计时
- 自适应滤波(LMS,RLS)