npm install --save vuex-persist

import VuexPersistence from 'vuex-persist'

const vuexLocal = new VuexPersistence({
storage: window.localStorage
}) const store = new Vuex.Store<State>({
state: { ... },
mutations: { ... },
actions: { ... },
plugins: [vuexLocal.plugin]
})

vuex 即可实现 持久化!(刷新不丢数据)

例如 index.js

import Vue from 'vue'
import Vuex from 'vuex' import VuexPersistence from 'vuex-persist' const vuexLocal = new VuexPersistence({
storage: window.localStorage
}) Vue.use(Vuex) import PostClass from './modules/PostClass' export default new Vuex.Store({
plugins: [vuexLocal.plugin],
state: {
/**
* 登陆前的url..用于登录后跳转到 此url
*/
beforeLoginUrl: '',
/**
* 当前登陆用户的菜单
*/
menuList: [],
/**
*
*/
postClass: [] },
modules: {
PostClass
},
mutations: {
setBlUrl(state, path) {
state.beforeLoginUrl = path;
},
setMenuList(state, payload) {
state.menuList = payload
}
}
})
 

vue-persist 为 vuex 持久化!!的更多相关文章

  1. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  2. 实现一个简易版的vuex持久化工具

    背景 最近用uni-app开发小程序项目时,部分需要持久化的内容直接使用vue中的持久化插件貌似不太行,所以想着自己实现一下类似vuex-persistedstate插件的功能,想着功能不多,代码量应 ...

  3. Vue状态管理vuex

    前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...

  4. Vue 入门之 Vuex 实战

    Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...

  5. Vue学习笔记:Vuex

    为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...

  6. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

  7. Vuex持久化存储之vuex-persist

    在引入mapMutations时报错,解决方法: 1:npm install --save-dev babel-plugin-transform-object-rest-spread 2:在packa ...

  8. Vue刷新页面VueX中数据清空了,怎么重新获取?

    Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...

  9. vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

    需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...

随机推荐

  1. ThinkPHP3.2 插入数据库数据,缓存问题

    每个字段都是有数据的,可是就是is_new插不进去, 最后的原因就是TP有数据库字段缓存,FUCK 把RunTIme下面的Data文件夹删除掉,在开发模式中就把自动缓存改成Fasle

  2. SpringBoot18 Swagger、API接口文档生成、WireMock、模拟后台数据

    1 Swagger 1.1 简述 前后端分离的项目需要前后端开发人员协同工作,后台开发人员需要给到前端开发者一套API文档:利用Swagger可以简单高效的帮助后台开发者生成RestfulAPI开发文 ...

  3. 基于.Net平台常用的组件和框架整理

    转载自:http://www.cnblogs.com/hgmyz/p/5313983.html 基于转载进行补充 RPC框架: RPC:远程过程调用协议,它是一种通过网络从远程计算机程序上请求服务,而 ...

  4. iPhone的home键进果汁了,按起来粘粘的感觉

    解决办法是按住home键转动一下,再用棉签蘸点水或者酒精都行(注意:水不要太多,不能让水渗进去),用棉签按压home 键多转几圈就好了.

  5. js原型链prototype与__proto__以及new表达式

    对象模型的细节 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

  6. LIRE教程之源码分析 | LIRE Tutorial of Analysis of the Source Code

    LIRE教程之源码分析 |LIRE Tutorial of Analysis of the Source Code 最近在做地理图像识别和检索的研究,发现了一个很好用的框架LIRE,遂研究了一通.网上 ...

  7. httpClient-3.1学习笔记

    http://hc.apache.org/httpclient-3.x/tutorial.htmlThe general process for using HttpClient consists o ...

  8. HDU - 1251 统计难题(trie树)

    Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀).  Input输入数据的第一部 ...

  9. easyui SWFUpload

    业务背景:实现一个用药人的增加功能,用药人信息中包含附件.如题所示,主要讨论easyui上传的实现.jsp页面代码(弹出框),一个简单的增加页面 div id=addMedicationDlg cla ...

  10. 用JS实现表格的高亮显示

    1.所用事件详解 2.<thead>,<tbody>标签介绍 <thead> 标签定义表格的表头.该标签用于组合 HTML 表格的表头内容. thead 元素应该与 ...