保存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 ...
随机推荐
- 3、Java 对象和类
1.理解Java中的类和对象 对象: 作为学习计算机专业的很有意思,跟朋友开玩笑说,我有很多对象,没有就new一个.对象可以说是类的实例,通过类的构造方法得到的一个对象实例.它拥有此对象应有的行为与方 ...
- ALGEBRA-1 向量空间
向量空间对加法封闭 对数乘封闭 直和:表示的唯一性
- vs2017引用vue组件中文乱码
原因:文件默认编码格式为ASNI编码,需要改成UTF-8编码 解决方案: ①用记事本打开component.js文件 ②另存文件,修改编码为UTF-8编码,保存
- Linux与Windows的区别(后面了解后继续更新)
1.转自知乎上的@Haoyuan Xing得答案: Linux是一个以开发者为中心的操作系统,Windows是以消费者为中心的操作系统.这是最根本的区别,也是Linux相对于Windows的优势/劣势 ...
- ms14-064漏洞复现
本博客最先发布于我的个人博客,如果方便,烦请移步恰醋的小屋查看,谢谢您! 这是我在实验室学习渗透测试的第五个漏洞复现,一个多小时便完成了.学长给的要求只需完成查看靶机信息.在指定位置创建文件夹两项操作 ...
- Oracle 多条数据转一行逗号隔开
wm_concat 例: select wm_concat(市) from pa50 where apa132=省
- git pull冲突的解决方案
处理步骤: 1.先将本地修改存储起来 $ git stash 这样本地的所有修改就都被暂时存储起来 .使用git stash list可以看到保存的信息: git stash暂存修改 其中stash@ ...
- firewall几个常用命令
systemctl status firewalld firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --r ...
- git 常规操作 windows版
首先在本地建立好文件夹,然后初始化git仓库: git init 接下来在github上面克隆项目: git clone 这里写你的项目地址 然后就可以修改,删除,提交代码了 如果需要在新分支上面开 ...
- MacOS开发环境搭建
1 Java 安装jdk 下载安装即可,没什么可说的,着重说一下配置mac下的环境变量 $ /usr/libexec/java_home -V #查看安装的jdk版本和路径 $ vim ~/.bash ...