vue-persist 为 vuex 持久化!!
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 持久化!!的更多相关文章
- 解决Vuex持久化插件-在F5刷新页面后数据不见的问题
页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...
- 实现一个简易版的vuex持久化工具
背景 最近用uni-app开发小程序项目时,部分需要持久化的内容直接使用vue中的持久化插件貌似不太行,所以想着自己实现一下类似vuex-persistedstate插件的功能,想着功能不多,代码量应 ...
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- Vue 入门之 Vuex 实战
Vue 入门之 Vuex 实战 引言 Vue 组件化做的确实非常彻底,它独有的 vue 单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其 Vue 组件设计的就 ...
- Vue学习笔记:Vuex
为什么需要Vuex 管理共享状态 解决一份数据在多个组件中试用的困难 系统化的状态管理,区别于小型状态过来 底层设计模式: 全局单例模式 应用场景 适合中大型项目: 小项目反而会因为引入更多概念和框架 ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
- Vuex持久化存储之vuex-persist
在引入mapMutations时报错,解决方法: 1:npm install --save-dev babel-plugin-transform-object-rest-spread 2:在packa ...
- Vue刷新页面VueX中数据清空了,怎么重新获取?
Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我 ...
- vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据
需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...
随机推荐
- 八数码问题——A*大法好
[描述] 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示. 空格周围的棋子可以移到空格中. 要求解的问题是:给出一种初始布局(初始状态)和目标布局( ...
- SpringBoot27 JDK动态代理详解、获取指定的类类型、动态注册Bean、接口调用框架
1 JDK动态代理详解 静态代理.JDK动态代理.Cglib动态代理的简单实现方式和区别请参见我的另外一篇博文. 1.1 JDK代理的基本步骤 >通过实现InvocationHandler接口来 ...
- SpringBoot18 Swagger、API接口文档生成、WireMock、模拟后台数据
1 Swagger 1.1 简述 前后端分离的项目需要前后端开发人员协同工作,后台开发人员需要给到前端开发者一套API文档:利用Swagger可以简单高效的帮助后台开发者生成RestfulAPI开发文 ...
- java 实现mysql数据库备份
package com.itenp.gen.action; import java.io.BufferedReader; import java.io.FileInputStream; import ...
- python文件处理os模块
一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.(一语中的) 二.常用方法 1.os.name 输出字符串指示正在使用的平台 ...
- <abbr> 元素的样式为显示在文本底部的一条虚线边框,当鼠标悬停在上面时会显示完整的文本(只要您为 <abbr> title 属性添加了文本)
<abbr title="World Wide Web">WWW</abbr><br><abbr title="Real Sim ...
- 编写高质量代码改善C#程序的157个建议——建议44:理解委托中的协变
建议44:理解委托中的协变 委托中的泛型变量天然是部分支持协变的.为什么是“部分支持协变”?看下面示例: class Program { public delegate T GetEmployeeHa ...
- python DDT读取excel测试数据
转自:http://www.cnblogs.com/nuonuozhou/p/8645129.html ddt 结合单元测试一起用 ddt(data.driven.test):数据驱动测试 由外部 ...
- MVC - Model - Controller - View
一. Model 1.1 在ASP.NET MVC 中 model 负责的是所有与 "数据“ 相关的的任务. 也可以把Model 看成是 ASP.NET 中三层模式的 BLL层 加 DA ...
- C#Async,await异步简单介绍
C# 5.0 引入了async/await,.net framework4.5开始支持该用法 使用: 由async标识的方法必须带有await,如果不带await,方法将被同步执行 static vo ...