保存vuex状态刷新不消失
写在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状态刷新不消失的更多相关文章
- vuex状态管理-数据改变不刷新
困惑: 在页面初始化的时候,我提交到vuex状态管理,然后在获取的时候获取不到,我找到了出错的地点,并进行了修改,然后可以获取到状态 但是不知道原因? 定义了如下的state const state ...
- 使用SQL Server保存Session状态,实现单点登录
在做一些应用网站时,我们可能会碰到这样一种情况:整个项目是由多个网站组成的,而我们要实现用户从一个站点登录后,跳转到其他网站不需要重复登录,即实现单点登录.目前实现单点登录的技术也有好几种,这篇文章描 ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- VueX状态管理器 的应用
VueX状态管理器 cnpm i vuex axios -S 1 创建Vuex 仓库 import Vue from 'vue' import Vuex from 'vuex' vue.use(Vue ...
- Vuex 状态管理的工作原理
Vuex 状态管理的工作原理 为什么要使用 Vuex 当我们使用 Vue.js 来开发一个单页应用时,经常会遇到一些组件间共享的数据或状态,或是需要通过 props 深层传递的一些数据.在应用规模较小 ...
- 巧用location.hash保存页面状态
在我们的项目中,有大量ajax查询表单+结果列表的页面,由于查询结果是ajax返回的,当用户点击列表的某一项进入详情页之后,再点击浏览器回退按钮返回ajax查询页面,这时大家都知道查询页面的表单和结果 ...
- JMeter 怎么保存登录状态
在Recording Controller中添加一个HTTP Cookie Manager Recording Controller右键-->add-->config element--& ...
- vue从入门到进阶:Vuex状态管理(十)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
随机推荐
- C语言输出颜色
命令后界面输出颜色 嵌入式终端界面输出日志时,为了区分输出的有用信息.错误信息,可以给不同级别的输出加上不同的颜色,以方便查看. 下面是颜色的定义: //颜色宏定义 #define NONE &quo ...
- Java实现短信验证码
前言 本人使用的是阿里短信服务,一开始尝试了许多不同的第三方短信服务平台,比如秒滴科技.梦网云通讯.当初开始为什么会选择这两个,首先因为,他们注册就送10元钱(#^.^#),但是后来却发现他们都需要认 ...
- MapReduce之自定义OutputFormat
@ 目录 OutputFormat接口实现类 自定义OutputFormat使用场景及步骤 使用场景 自定义OutputFormat 案例实操 OutputFormat接口实现类 OutputForm ...
- EfficientNet
- MySQL数据库安装,MySQL数据库库的增删改查,表的增删改查,表数据的基本数据类型
一 MySQL的安装 MySQL现在属于甲骨文公司,所以和java语言匹配度较高,同时甲骨文公司的另一种数据库为Oracle,两者同为关系型数据库,即采用关系模型来组织数据,以行和列的方法来存储数据的 ...
- C#LeetCode刷题之#415-字符串相加(Add Strings)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3873 访问. 给定两个字符串形式的非负整数 num1 和num2 ...
- C#LeetCode刷题之#189-旋转数组(Rotate Array)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3700 访问. 给定一个数组,将数组中的元素向右移动 k 个位置, ...
- Vuex mapGetter的基本使用
getter相当于Vuex中的计算属性 对 state 做处理再返回 mapGetters 把 Store 中的 getters 映射到组件中的计算属性中 Store文件 import Vue fro ...
- MyBatis学习-使用Druid连接池将Maybatis整合到spring
目录 前言 什么是Druid连接池 Druid可以做什么? 导入库包 连接oracle 连接mysql 导入mybatis 导入druid 导入spring-jdbc包 导入spring包 导入spr ...
- 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 扫码体验,先睹为快 可以扫描下微信小程序的 ...