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工作原理
随机推荐
- jps命令详解
JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...
- win10家庭版删除文件提示没有权限最简单的方式
1.cmd 2.右键-以管理员身份运行(重要) 3.输入:net user administrator /active:yes,开启超级管理员账号 4.win+r键打开运行对话框,输入 netplwi ...
- 本地Linux备份服务器[Client]定期备份云服务器[Server]上的文件(下)
https://www.cnblogs.com/kevingrace/p/5972563.html Client上使用rsync命令查看服务器上文件列表rsync --list-only -e &qu ...
- python小程序打包
1.首先先要安装 pip install pywin32 pip install pyinstaller 没有越狱安装不了加个国内镜像地址: pip install pyinstaller -i ht ...
- G面经: Design Stock Price Display System
Implement a simple stock price display systemwhich will show High, Low and Last price for a given st ...
- 00JAVA语法基础_动手动脑
1.仔细阅读示例: EnumTest.java,运行它,分析运行结果? 枚举类型的使用是借助ENUM这样一个类,这个类是JAVA枚举类型的公共基本类.枚举目的就是要让某个变量的取值只能为若干固定值中的 ...
- mysql修改用户密码笔记(转)
方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...
- PHP----------php封装的一些简单实用的方法汇总
1.xml转换成array,格式不对的xml则返回false function xml_parser($str){ $xml_parser = xml_parser_create(); i ...
- Sublime text 替换成对标签 首尾匹配的HTML 标签
按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签
- 1. centos下安装docker
CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...