Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是,Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据,只要一刷新页面,数据就丢失了。

引入vuex-persist 插件,它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ,而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下

pexels-photo-1211847.jpeg

安装:

npm install --save vuex-persist
or
yarn add vuex-persist

引入:

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置:

const vuexLocal = new VuexPersistence({
storage: window.localStorage
})

引入进vuex插件:

const store = new Vuex.Store({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
})

通过以上设置,在图3中各个页面之间跳转,如果刷新某个视图,数据并不会丢失,依然存在,并且不需要在每个 mutations 中手动存取 storage 。

vuex-persist 的详细属性:

属性 类型 描述
key string 将状态存储在存储中的键。默认: 'vuex'
storage Storage (Web API) 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有get和set. 默认是: window.localStorage
saveState function (key, state[, storage]) 如果不使用存储,这个自定义函数将保存状态保存为持久性。
restoreState function (key[, storage]) => state 如果不使用存储,这个自定义函数处理从存储中检索状态
reducer function (state) => object 将状态减少到只需要保存的值。默认情况下,保存整个状态。
filter function (mutation) => boolean 突变筛选。看mutation.type并返回true,只有那些你想坚持写被触发。所有突变的默认返回值为true。
modules string[] 要持久化的模块列表。

原文

转载于:https://www.cnblogs.com/wang-sai-sai/p/11076833.html

vuex-persist数据持久化存储插件的更多相关文章

  1. vuex数据持久化存储

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

  2. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  3. iOS数据持久化存储:归档

    在平时的iOS开发中,我们经常用到的数据持久化存储方式大概主要有:NSUserDefaults(plist),文件,数据库,归档..前三种比较经常用到,第四种归档我个人感觉用的还是比较少的,恰恰因为用 ...

  4. iOS开发——数据持久化Swift篇&使用Core Data进行数据持久化存储

    使用Core Data进行数据持久化存储   一,Core Data介绍 1,Core Data是iOS5之后才出现的一个数据持久化存储框架,它提供了对象-关系映射(ORM)的功能,即能够将对象转化成 ...

  5. Swift - 使用Core Data进行数据持久化存储

    一,Core Data介绍 1,Core Data是iOS5之后才出现的一个数据持久化存储框架,它提供了对象-关系映射(ORM)的功能,即能够将对象转化成数据,也能够将保存在数据库中的数据还原成对象. ...

  6. [Xcode 实际操作]七、文件与数据-(14)数据持久化存储框架CoreData的使用:删除CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何删除数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  7. [Xcode 实际操作]七、文件与数据-(13)数据持久化存储框架CoreData的使用:编辑CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何修改数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  8. [Xcode 实际操作]七、文件与数据-(12)数据持久化存储框架CoreData的使用:查找CoreData中的数据

    目录:[Swift]Xcode实际操作 本文将演示如何查找数据持久化对象. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //引入数据持 ...

  9. [Xcode 实际操作]七、文件与数据-(11)数据持久化存储框架CoreData的使用:创建CoreData实体并插入数据

    目录:[Swift]Xcode实际操作 本文将演示[CoreData]数据持久化存储框架的使用. 点击[Create a new Xcode project]创建一个新的项目 ->[Single ...

随机推荐

  1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test_vue_0613@1.0.0 dev: 错误的解决方法

    错误原因在于由于文件 node_modules 太大,在项目上传时有些人会删掉 导致我们下载的项目中缺少这个文件 在尝试把自己项目的 node_modules文件夹直接复制过去之后发现问题还没有得到解 ...

  2. web页面调用支付宝支付

    web页面调用支付宝支付 此文章是前端单独模拟完成支付,若在线上环境则需要后台配合产生签名等参数 在蚂蚁金服开放平台申请沙箱环境 将沙箱环境中的密钥.应用网关.回调地址补全,生成密钥的方法在此 配置好 ...

  3. jdk1.8 新特性之Stream

    --------------------- 作者:码农农码一生 来源:CSDN 原文:https://blog.csdn.net/chenhao_c_h/article/details/8069128 ...

  4. 下载腾讯视频mp4格式

    import time import subprocess import argparse def command(cmd, timeout=60): ''' :param cmd: 执行命令cmd, ...

  5. Spring (六):整合Mybatis

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  6. 第一章 AT&T

    1.一个公司(企业)越庞大,就越危险:越复杂,就越濒临坍塌:快速发展的同时,也埋下了隐患. 2.再庞大的企业也不可能永久站立,下个十年谁也说不准谁会在浪潮之巅. 3.一个人能走多远,往往取决于他能看多 ...

  7. python 删除三天前的日志.py

    #获取所有文件def file(): for cur_dir, dirs, files in os.walk(r'/学习/接口自动化/BestTest/作业/logs'): # cur_dir(当前路 ...

  8. postman 工具接口测试

    一.get:请求多个参数时,需要用&连接 eg:http://api.***.cn/api/user/stu_info?stu_name=小黑&set=女   eg:接口请求参数放在b ...

  9. 中阶d03.2 JDBC联合properties使用,通过读取本地配置文件为代码传递参数

    * 使用properties读取本地配置文件为代码传递参数 * url.用户名.密码.驱动地址等配置可以在配置文件中使用 main package zj_1_JDBC.properties; impo ...

  10. Python操作rabbitmq系列(三):多个接收端消费消息

    接着上一章.这一章,我们要将同一个消息发给多个客户端.这就是发布订阅模式.直接看代码: 发送端: import pikaimport sys connection = pika.BlockingCon ...