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. java基础之io流总结四:字符流读写

    字符流读写只适用于字符文件. 基本字符流(转换流)读写文件 转换流本身是字符流,但是实例化的时候传进去的是一个字节流,所以叫做转换流 InputStreamReader isr = new Input ...

  2. 【原创】0. MYSQL++的环境准备

    1. 获取 Google MYSQL++,第一个就是,然后跟着要求进行下载. 2. 编译和安装 其实在作者的各种README文档里面已经写得很清楚了,现在对一些可能会出现问题的地方进行一下回顾. Wi ...

  3. 面试题:hibernate 有用

    1. Hibernate的工作流程? 答案: 1.通过Configuration对象读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory对象 3.打开session 4.创建事 ...

  4. Mac anzhuangxgboost

    2. 从Github库安装XGBoost 第一步, 克隆最新的XGBoost到本地 git clone --recursive https://github.com/dmlc/xgboost 第二步, ...

  5. 7.内网渗透之windows认证机制

    文章参考自三好学生域渗透系列文章 看了内网渗透第五篇文章,发现如果想要真正了解PTT,PTH攻击流程,还需要了解windows的认证机制,包括域内的kerberos协议. windows认证机制 在域 ...

  6. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  7. Python基础-4

    目录 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 1.列表生成式,迭代器&生成器 看列表[0, 1, 2, 3, 4, 5, 6, 7, ...

  8. 在Eclipse中连接SQL

    原创 在Eclipse中连接SQL分为如下几个步骤: 1.加载驱动程序 2.创建连接对象 3.创建执行SQL语句的对象 4.执行SQL语句 5.关闭new出来的对象 1.加载驱动程序(以SQL为例) ...

  9. [转]xe6 android 使用距离传感器(Proximiry)

    The first step it's a run sample from RAD Studio that named SensorInfo on your device. On the tab Bi ...

  10. C++程序的目录结构、编译、打包、分发

    管理C++的第三方库以及编译 第三方库这个说法,不知道出自哪里,但一般是指开发者,系统/平台提供商之外的第三个参与者提供的程序库. 大多数开源软件库在软件系统中都是第三方库. 完全不使用库的开发,在9 ...