vuex store刷新存储状态
app.vue
平时不想把信息存到session里,只有无可奈何的时候才准备存
<script>
export default {
name: 'App',
created() {
//刷新不丢失store状态
//在页面加载时,读取sessionStorage里的状态信息
if (sessionStorage.getItem('userinfo')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('userinfo'))));
}
//在页面刷新时,将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('userinfo', JSON.stringify(this.$store.state));
});
}
};
</script>
vuex store刷新存储状态的更多相关文章
- Vuex 页面刷新后store保存的数据会丢失 取cookie值
在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...
- 2、vuex页面刷新数据不保留,解决方法(转)
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- vue——store全局存储
业务场景:刷新页面时,首次拉取所有配置,存储到store状态管理用于全局调用: import Vue from 'vue' import Vuex from 'vuex' import userInf ...
- vuex数据持久化存储
想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...
- 结合sessionStorage解决vuex页面刷新数据丢失的问题
将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...
- [Vuex] Split Vuex Store into Modules using TypeScript
When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...
随机推荐
- Lecture3.随机变量及其概率分布
1.随机变量的定义 2.随机变量的类型: 若随机变量X的可能取值是有限个或可列个, 则称X为离散型随机变量. 反之,则称X为非离散型随机变量. 若随机变量X的可能取值“连续”(“不间断”),则称X 为 ...
- 【Python全栈-HTML】HTML引入文件的绝对路径、相对路径、根目录
HTML引入文件的绝对路径.相对路径.根目录 什么是绝对路径?绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片.超级链接.flash.音频.视频等等.代码如下: 1.引入网络上的资源: ...
- node js 爬虫爬取静态页面,
先打一个简单的通用框子 //根据爬取网页的协议 引入对应的协议, http||https var http = require('https'); //引入cheerio 简单点讲就是node中的jq ...
- HDU 2544最短路 【dijkstra 链式前向星+优先队列优化】
最开始学最短路的时候只会用map二维数组存图,那个时候还不知道这就是矩阵存图,也不懂得效率怎么样 经过几个月的历练再回头看最短路的题, 发现图可以用链式前向星来存, 链式前向星的效率是比较高的.对于查 ...
- 爬虫 - 动态分页抓取 游民星空 的资讯 - bs4
# coding=utf-8 # !/usr/bin/env python ''' author: dangxusheng desc : 动态分页抓取 游民星空 的资讯 date : 2018-08- ...
- 在windows上搭建git server Gitblit
在Windows上搭建Git Server 第1步:下载Java并安装Java.我这里下载的是jdk1.7.0_79 第2步:配置Java环境变量 右键” 计算机” => ”属性” => ...
- LigerUi之ligerMenu 右键菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HRY and codefire
传送门: 设 dp[i][j]为第一个号i等级,第二个号j等级的期望值 a[i]存每个等级上分的概率 dp[i][j]=a[i]*dp[i+1][j]+(1-a[i])*dp[j][i]+1 dp[j ...
- Netflix是怎样运行的(极度简化版)— 每次点击播放按钮背后的复杂东西
Netflix是怎样运行的(极度简化版)- 每次点击播放按钮背后的复杂东西 本文摘译自 How Netflix works: the (hugely simplified) complex stuff ...
- h5样式布局
在文字的左面加图标 background: url(../images/hi.png) left no-repeat; 如图所示