想想好还是说下vuex数据的持久化存储吧。依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解。当涉及到非父子组件之间通信时,选择了vuex。只是后来竟然发现,刷新页面,数据去哪了???一脸懵逼。其实vuex本质上只是一个公共变量,是存储在浏览器内存中的,刷新页面,浏览器内存重置,数据也会被清空。如果要做数据持久化存储,肯定需要借助浏览器缓存,常用的也就localStorage,sessionStorage,indexDB之前了解一点,用的不是很多。现在也有很多数据持久化存储插件,原理都差不多,下面介绍一下vuex-persist的基本使用:

  1、安装 

npm install vuex-persist -D

  2、基本使用

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import VuexPersist from 'vuex-persist' Vue.use(Vuex); const vuexLocal = new VuexPersist({
storage: window.localStorage //可选,sessionStorage/indexDB
}); const store = new Vuex.Store({
state,
getters,
mutations,
actions,
plugins: [vuexLocal.plugin]
}); export default store

  

vuex数据持久化存储的更多相关文章

  1. VueX数据持久化

    解决:Vue刷新时获取不到数据 解决方案:1.本地存储 2.Vuex数据持久化工具插件 本地存储 import Vue from "vue"; import Vuex from & ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  9. vuex-persist数据持久化存储插件

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

随机推荐

  1. for XX in XX结构

    这是一个循环!! in 后面可跟range,enumerate,序列等 for i in [(1,2),(2,3),("gege",5)]: print (i) 执行结果: (1, ...

  2. Java打印M图形(二维数组)——(九)

    对于平面图形输出集合图形与数字组合的,用二维数组.先在Excel表格中分析一下,找到简单的规律.二维数组的行数为行高,列数为最后一个数大小. 对于减小再增大再减小再增大的,可以用一个boolean标志 ...

  3. Check Box、Radio Button、Combo Box控件使用

    Check Box.Radio Button.Combo Box控件使用 使用控件的方法 1.拖动控件到对话框 2. 定义控件对应的变量(值变量或者控件变量) 3.响应控件各种消息 Check Box ...

  4. Faster rcnn代码理解(4)

    上一篇我们说完了AnchorTargetLayer层,然后我将Faster rcnn中的其他层看了,这里把ROIPoolingLayer层说一下: 我先说一下它的实现原理:RPN生成的roi区域大小是 ...

  5. UML和模式应用5:细化阶段(4)--如何创建领域模型

    1.前言 以当前迭代中所要设计的需求为界,创建领域模型的步骤: 1.寻找概念类 2.将其绘制为UML类图中的类 3.添加关联和属性 2.如何寻找概念类 寻找概念类有如下几种方法: 重用和修改现有的模型 ...

  6. Linux中断处理(一)

    最近在研究异步消息处理, 突然想起linux内核的中断处理, 里面由始至终都贯穿着"重要的事马上做, 不重要的事推后做"的异步处理思想. 于是整理一下~~第一阶段--获取中断号每个 ...

  7. C#面向对象(基础知识)

    面向对象:就是CLASS,class就是用户自定义类型: class:用户自定义引用类型:三大特点:封装.继承.多态: 解决方案中右键添加class:class内可以写结构体,枚举,函数: C#中各个 ...

  8. npm install 报错(npm ERR! errno -4048,Error: EPERM: operation not permitted,)解决方法

    npm ERR! path E:\SouthernPowerGridProject\web_project\AutoOPS\autoops\node_modules\fsevents\node_mod ...

  9. 【python】logging记录traceback

    import logging try: do-something-block except: logging.exception("Exception Logged")

  10. hdu4122

    题目很长,有点恶心,但实际上是个单调队列 没搞出来,题解 https://blog.csdn.net/lvshubao1314/article/details/46910271 #include< ...