Vue-admin工作整理(十二):Vuex-插件(持久化存储)
Vuex可以支持插件形式,来处理指定业务,比如:持久化存储的插件(当每次刷新浏览器的时候store里面的参数都会被清除,因为它是存在内存中的,而不是存在本地的,有时候我们希望将一些东西存在本地)
插件其实是一个函数,它只有一个参数就是store,这个函数实在store初始化的时候(实例初始化的时候)调用,刷新浏览器后第一次做的操作可以定义在该函数里,该操作由store的subscribe方法来完成,该方法是当每次提交mutation的时候,它都会执行subscribe里面的回调函数,该回调函数有两个参数:mutation(本次提交的muation的一些信息)、state(当前模块的state).
使用插件:在创建实例的地方:index.js加载插件:
import saveInLocal from './plugin/saveInLocal' plugins: [saveInLocal]
插件使用思路:每次提交的时候,我们希望将提交的数据存放在本地,那么就需要把提交的内容存放在localStorage的state里,因为函数中state参数是一个对象,因此要转化成JSON字符串来存储,然后每次刷新后我们需要将localStorage里的state里的内容读出来重新存放在store实例里?
首先要做一个判断:如果当前实例中的localStorage.state已经存储了有了值,那么我们就需要通过store.repalceState(JSON.parse(localStorage.state))方法,将字符串转成对象,然后替换到当前实例里
export default store => {
console.log('store初始化了')
if (localStorage.state) store.replaceState(JSON.parse(localStorage.state)) // 如果当前实例中的localStorage.state已经存储了有了值
store.subscribe((mutation, state) => {
console.log('提交mutation')
localStorage.state = JSON.stringify(state) // 把提交的内容存放在localStorage的state里,因为函数中state参数是一个对象,因此要转化成JSON字符串来存储
})
}
Vue-admin工作整理(十二):Vuex-插件(持久化存储)的更多相关文章
- Vue-admin工作整理(二):项目结构个人配置
通过上一篇文章(Vue-admin工作整理(一):项目搭建)操作完毕后,基础项目已经搭建,下面就要对项目本身进行一下项目结构调整来符合自己的项目要求 1.首先要对package.json文件进行调整, ...
- How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性
个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...
- vuex数据持久化存储
想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...
- Kubernetes 学习(十)Kubernetes 容器持久化存储
0. 前言 最近在学习张磊老师的 深入剖析Kubernetes 系列课程,最近学到了 Kubernetes 容器持久化存储部分 现对这一部分的相关学习和体会做一下整理,内容参考 深入剖析Kuberne ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Dynamic CRM 2013学习笔记(二十二)插件里调用WCF服务
1. 添加service: 2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...
- Session 知识点再整理(二) 自定义 Session 存储机制
对于访问量大的网站,用默认的 Session 存储方式(以文件存储)不适合,因为文件的 I/O 开销会非常大,另外 Session 机制本身使 Session 不能跨机访问,在 Web 集群中无法达到 ...
- 【Beta阶段】第十二周Scrum会议
[Beta阶段]第十二周Scrum会议 本次会议为第十二周第一次Scrum Meeting,会议对Beta阶段工作进行了总结,针对Beta阶段还未完成的问题进行了讨论. 会议时间为2019.12.3. ...
- 计算机网络(十二),Socket简介
目录 1.Socket简介 2.Socket工作原理 十二.Socket简介 1.Socket简介 2.Socket工作原理
随机推荐
- spring-boot war包
接着上面的spring-boot项目,直接使用jar包方便调试,在开发阶段非常方便,生产上最好打成war形式 要想spring-boot打war包,还是从pom.xml入手 1.1 调整pom.xml ...
- 20175313 张黎仙《Java程序设计》第九周学习总结
目录 学号 20175313 <Java程序设计>第九周学习总结 一.教材学习内容总结 二.教材学习中的问题和解决过程 三.代码托管 四.心得体会 五.学习进度条 六.参考资料 学号 20 ...
- 阿里云RDS数据库改造迁移方案
1. 改造原因 (1) 由于历史原因, 本应该是同一个库的表分布在两个数据库中,需要对这两个库进行合并. (2) 已有的数据库性能无法满足业务的增长需要, 查询卡,慢问题突出. (3) 当前自建Mys ...
- (转)Jmeter基础之编写HTTP接口用例
使用Jmeter书写一个接口用例 第一:添加线程组 一.添加一个线程组,方法如下图所示: 二.配置线程组,如下图图所示: 需要填写名称,按需要修改线程数.等待时间和循环次数等: 第二:添加http请 ...
- Cocos Creator JS 获取当前日期与时间
var testDate = new Date(); testDate.getYear();//获取当前年份(2位) testDate.getFullYear(); //获取完整的年份(4位,1970 ...
- Rsync数据同步工具
Rsync数据同步工具 什么是Rsync? Rsync是一款开源的.快速的.多功能的,可以实现全量及增量的本地或原程数据同步备份 ...
- Java设计模式之动态代理
关于Proxy: 1,他是所有动态代理的父类: 2,他可以用作创建动态代理类和动态代理对象: 3,JDK中自带的动态代理. 1,首先创建一个接口,方法申明如下: package com.proxy; ...
- SQL注入检测方法
private bool CheckParams(params object[] args){ string[] Lawlesses={"=","'"}; if ...
- x509证书相关内容
什么是证书 X.509证书,其核心是根据RFC 5280编码或数字签名的数字文档. 实际上,术语X.509证书通常指的是IETF的PKIX证书和X.509 v3证书标准的CRL 文件,即如RFC ...
- [NOIP2015普及组]求和
题目 题目描述 一条狭长的纸带被均匀划分出了n个格子,格子编号从1到n.每个格子上都染了一种颜色color_i用[1,m]当中的一个整数表示),并且写了一个数字numberi. 定义一种特殊的三元组: ...