写在App.vue中,所有页面共享此方法

export default {
name: "app",
components: {},
created() {
// 页面每次刷新加载时候都会去读取sessionStorage里面的vuex状态
   if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store")) //这里存的是可能经过mutions处理过的state值,是最新的,所以放在最后
)
)
}
// 在页面刷新之前把vuex中的信息存到sessionStoreage
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
}
};

vuex该怎么写还是怎么写,就不用跟以前一样如果想保存每个 state 里面的状态值,都要写个sessionStorage了。

保存vuex状态刷新不消失的更多相关文章

  1. vuex状态管理-数据改变不刷新

    困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...

  2. 使用SQL Server保存Session状态,实现单点登录

    在做一些应用网站时,我们可能会碰到这样一种情况:整个项目是由多个网站组成的,而我们要实现用户从一个站点登录后,跳转到其他网站不需要重复登录,即实现单点登录.目前实现单点登录的技术也有好几种,这篇文章描 ...

  3. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  4. VueX状态管理器 的应用

    VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...

  5. Vuex 状态管理的工作原理

    Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...

  6. 巧用location.hash保存页面状态

    在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果 ...

  7. JMeter 怎么保存登录状态

    在Recording Controller中添加一个HTTP Cookie Manager Recording Controller右键-->add-->config element--& ...

  8. vue从入门到进阶:Vuex状态管理(十)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...

  9. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

随机推荐

  1. 在图像中隐藏数据:用 Python 来实现图像隐写术

    什么是“隐写术”? 隐写术是将机密信息隐藏在更大的信息中,使别人无法知道隐藏信息的存在以及隐藏信息内容的过程.隐写术的目的是保证双方之间的机密交流.与隐藏机密信息内容的密码学不同,隐写术隐瞒了传达消息 ...

  2. Faiss流程与原理分析

    1.Faiss简介 Faiss是Facebook AI团队开源的针对聚类和相似性搜索库,为稠密向量提供高效相似度搜索和聚类,支持十亿级别向量的搜索,是目前最为成熟的近似近邻搜索库.它包含多种搜索任意大 ...

  3. Java Redis系列2 (redis的安装与使用+redis持久化的实现))

    Java Redis系列2 (redis的安装与使用+redis持久化的实现) 什么是Redis? Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库,官方提供测试数据,50 ...

  4. 2020-08-01:MySQL 的数据如何恢复到任意时间点?

    福哥答案2020-08-01: 恢复到任意时间点以定时的做全量备份,以及备份增量的 binlog 日志为前提.恢复到任意时间点首先将全量备份恢复之后,再此基础上回放增加的 binlog 直至指定的时间 ...

  5. 2020-05-18:MYSQL为什么用B+树做索引结构?平时过程中怎么加的索引?

    福哥答案2020-05-18:此答案来自群员:因为4.0成型那个年代,B树体系大量用于文件存储系统,甚至当年的Longhorn的winFS都是基于b树做索引,开源而且好用的也就这么个体系了.B+树的磁 ...

  6. 2020-04-18:synchronized和reentrantLock的异同

    福哥答案2020-04-19:采纳群员答案: 1 synchronized是关键字,reentrantlock是类,API层面的2 前者是通过monitor来实现锁机制,后者是基于AQS实现的,通过内 ...

  7. Springboot调用Oracle存储过程的几种方式

    因工作需要将公司SSH项目改为Spingboot项目,将项目中部分需要调用存储过程的部分用entityManagerFactory.unwrap(SessionFactory.class).openS ...

  8. MongoDB学习4:MongoDB复制集机制和原理,搭建复制集

    1.复制集的作用   1.1 MongoDB复制集的主要意义在于实现服务高可用   1.2 它的实现依赖于两个方面的功能:    · 数据写入时将数据迅速复制到另一个独立节点上    · 在接收写入的 ...

  9. 小程序3:ATM小程序

    ATM实现流程 1.欢迎界面和菜单 显示部分的代码代码放到view.py中 import time class View(): def login(): """ 管理员登 ...

  10. Java中的策略模式,完成一个简单地购物车,两种付款策略实例教程

    策略模式是一种行为模式.用于某一个具体的项目有多个可供选择的算法策略,客户端在其运行时根据不同需求决定使用某一具体算法策略. 策略模式也被称作政策模式.实现过程为,首先定义不同的算法策略,然后客户端把 ...