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-插件(持久化存储)的更多相关文章

  1. Vue-admin工作整理(二):项目结构个人配置

    通过上一篇文章(Vue-admin工作整理(一):项目搭建)操作完毕后,基础项目已经搭建,下面就要对项目本身进行一下项目结构调整来符合自己的项目要求 1.首先要对package.json文件进行调整, ...

  2. How Javascript works (Javascript工作原理) (十二) 网络层探秘及如何提高其性能和安全性

    个人总结:阅读完这篇文章需要20分钟,这篇文章主要讲解了现代浏览器在网络层传输所用到的一些技术, 应当对 window.performance.timing 这个API所有了解. 这是 JavaScr ...

  3. vuex数据持久化存储

    想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...

  4. Kubernetes 学习(十)Kubernetes 容器持久化存储

    0. 前言 最近在学习张磊老师的 深入剖析Kubernetes 系列课程,最近学到了 Kubernetes 容器持久化存储部分 现对这一部分的相关学习和体会做一下整理,内容参考 深入剖析Kuberne ...

  5. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  6. Dynamic CRM 2013学习笔记(二十二)插件里调用WCF服务

      1. 添加service:     2.调用WCF BasicHttpBinding myBinding = new BasicHttpBinding(); myBinding.Name = &q ...

  7. Session 知识点再整理(二) 自定义 Session 存储机制

    对于访问量大的网站,用默认的 Session 存储方式(以文件存储)不适合,因为文件的 I/O 开销会非常大,另外 Session 机制本身使 Session 不能跨机访问,在 Web 集群中无法达到 ...

  8. 【Beta阶段】第十二周Scrum会议

    [Beta阶段]第十二周Scrum会议 本次会议为第十二周第一次Scrum Meeting,会议对Beta阶段工作进行了总结,针对Beta阶段还未完成的问题进行了讨论. 会议时间为2019.12.3. ...

  9. 计算机网络(十二),Socket简介

    目录 1.Socket简介 2.Socket工作原理 十二.Socket简介 1.Socket简介 2.Socket工作原理

随机推荐

  1. SQL使用之关联更新、批量插入

    使用场景 某个字段数据异常,利用另外一张表同步修改该表异常字段的数据; 关联更新 UPDATE tableName1 AS t1 LEFT JOIN tableName12 AS t2 ON t1.x ...

  2. Python加密保护-对可执行的exe进行保护

    Python 是一种面向对象的解释型计算机程序设计语言,Python 语言写的程序不需要编译成二进制代码,可以直接从源代码运行程序. 在计算机内部,Python解释器把源代码转换成称为字节的中间形式, ...

  3. pwn学习日记Day1 基础知识积累

    ida / od 窗口(针对od操作) 反汇编窗口:显示被调试程序的反汇编代码,标题栏上的地址.HEX 数据.反汇编.注释可以通过在窗口中右击出现的菜单 界面选项->隐藏标题 或 显示标题 来进 ...

  4. 微软移除WIN10密码过期政策Microsoft Removes Password-Expiration Policy in Windows 10

    Microsoft this week announced a series of changes to the security baseline in Windows 10, including ...

  5. 分享一段js,判断是否是在iPhone中的Safari浏览器打开的页面

    头部引用jquery包 将下面的一段js写在</body>的前面 <script type="text/javascript"> var ua = navi ...

  6. newcode网学习笔记(1)

    1.类的内存结构一开始指向的是虚函数表,指向虚函数表的指针为4个字节(32位系统)[类的内存结构最前面的是指向虚函数表的指针] 2.包含标准库文件以及相关命名空间,则系统不允许用户重新定义标准库函数, ...

  7. java操作对比两个字符串,将差异数据提取出来

    记录瞬间 在实际的工作中,需要解决生成两次字符串结果进行对比的问题,将存在差异的字符串直接给出来. 当然,前提是需要将对比的两次结果,进行前期处理 比如: a_str = "@com/ene ...

  8. awk if print

    awk  -F","  '{ if($4=="abc" && $5=="def"){print $1} else {prin ...

  9. Kettle使用MySQL作为资源库报错解决方法

    使用Kettle5.0.1,安装的是MySQL5.1.JDK1.6,在\data-integration\lib目录里添加mysql的JDBC包mysql-connector-java-5.0.8-b ...

  10. Typora/VSCode/Sublime 更改Markdown默认宽度样式等

    Typora 所见即所得Markdown编辑器更改 最大宽度 C:\Users\Desk\AppData\Roaming\Typora\themes\github.css CSS第46行改为 max- ...