写在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. 从零搭建Spring Boot脚手架(1):开篇以及技术选型

    1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...

  2. Web For Pentester 学习笔记 - XSS篇

    XSS学习还是比较抽象,主要最近授权测的某基金里OA的XSS真的实在是太多了,感觉都可以做一个大合集了,加上最近看到大佬的博客,所以这里我也写一个简单的小靶场手册,顺带着也帮助自己把所有XSS的方式给 ...

  3. Catalina 默认使用zsh了,你可习惯

    zsh 成为默认 shell 淘汰掉我的旧MBP换新后,欢天喜地打开Terminal,感觉有点不对,提示符什么时候变成了 %. 查询了一些资料发现,原来在2019年WWDC期间,苹果推出了macOS ...

  4. 【API进阶之路】帮公司省下20万调研费!如何巧用情感分析API实现用户偏好调研

    摘要:自从学习API后,仿佛解锁了新技能,可别小看了一个小小的API接口,用好了都是能力无穷.这不,用情感分析API来做用户偏好调研,没想到这么一个小创意给公司省了20万调研费用. 上次借着高考热点整 ...

  5. HttpClient 模拟用户操作

    首先模拟用户登录: /** * 模拟用户登录 * */ private void login() throws HttpException, IOException { PostMethod logi ...

  6. JS学习第八天

    DOM访问列表框.下拉菜单的常用属性: form返回列表框.下拉菜单所在的表单对象; length返回列表框.下拉菜单的选项个数; options返回列表框.下拉菜单里所有选项组成的数组; defau ...

  7. wifi的前世今生

    日常生活中,大家都把wifi等同于wlan,其实二者是不同的东西. wlan是无线局域网,是个技术,有这个技术,我们就可以无线上网了. wifi是wifi联盟,用来做无线产品之间兼容性认证的,当我们的 ...

  8. DPL,RPL,CPL 之间的联系和区别

    CPL是当前进程的权限级别(Current Privilege Level),是当前正在执行的代码所在的段的特权级,存在于cs寄存器的低两位. RPL说明的是进程对段访问的请求权限(Request P ...

  9. Linux进程管理与性能监控

    1. 进程管理工具 这一节我们介绍进程管理工具: 使用进程管理工具,我们可以查询程序当前的运行状态,或终止一个进程: 任何进程都与文件关联:我们会用到lsof工具(list opened files) ...

  10. 贫血模型和DDD模型

    贫血模型和DDD模型 1.贫血模型 1.1 概念 常见的mvc三层架构 简单.没有行为 2.领域驱动设计 2.1 概念(2004年提出的) Domain Driven Design 简称 DDD DD ...