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. jps命令详解

    JPS 名称: jps - Java Virtual Machine Process Status Tool 命令用法: jps [options] [hostid] options:命令选项,用来对 ...

  2. win10家庭版删除文件提示没有权限最简单的方式

    1.cmd 2.右键-以管理员身份运行(重要) 3.输入:net user administrator /active:yes,开启超级管理员账号 4.win+r键打开运行对话框,输入 netplwi ...

  3. 本地Linux备份服务器[Client]定期备份云服务器[Server]上的文件(下)

    https://www.cnblogs.com/kevingrace/p/5972563.html Client上使用rsync命令查看服务器上文件列表rsync --list-only -e &qu ...

  4. python小程序打包

    1.首先先要安装 pip install pywin32 pip install pyinstaller 没有越狱安装不了加个国内镜像地址: pip install pyinstaller -i ht ...

  5. G面经: Design Stock Price Display System

    Implement a simple stock price display systemwhich will show High, Low and Last price for a given st ...

  6. 00JAVA语法基础_动手动脑

    1.仔细阅读示例: EnumTest.java,运行它,分析运行结果? 枚举类型的使用是借助ENUM这样一个类,这个类是JAVA枚举类型的公共基本类.枚举目的就是要让某个变量的取值只能为若干固定值中的 ...

  7. mysql修改用户密码笔记(转)

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  8. PHP----------php封装的一些简单实用的方法汇总

    1.xml转换成array,格式不对的xml则返回false function xml_parser($str){    $xml_parser = xml_parser_create();    i ...

  9. Sublime text 替换成对标签 首尾匹配的HTML 标签

    按Cmd-Shift-K (Win: Ctrl-Shift-') 就能选中这组标签

  10. 1. centos下安装docker

    CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...