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 ...
随机推荐
- Python 面试中可能会被问到的30个问题
第一家公司问的题目 1 简述解释型和编译型编程语言? 解释型语言编写的程序不需要编译,在执行的时候,专门有一个解释器能够将VB语言翻译成机器语言,每个语句都是执行的时候才翻译.这样解释型语言每执行一次 ...
- yii2 gridview checkbox
给checkbox(在GridView里的)添加一个value 控制器:$dataProvidermStu->key = "student_no"; view:[ 'clas ...
- python中删除list元素的方法del()、pop()和remove()
del():根据下标进行删除 In [1]: a = [1, 2, 3, 4, 5] In [2]: del a[0] In [3]: a Out[4]: [2, 3, 4, 5] pop(): 删除 ...
- Android的ViewPager的学习
这篇博客是对慕课网上看到的视频里学习到的知识的一些记录,让自己能够加深理解.视频地址:http://www.imooc.com/learn/1116 在这个视频中,目标是实现类似微信的主界面之间的切换 ...
- django 缓存信号等
参考别人的博客:写的挺好 http://www.cnblogs.com/wupeiqi/articles/5246483.html
- 解决webpack打包报错: Cannot find module '@webassemblyjs/wasm-parser'
出现这个错误时,百度和谷歌中都搜索不出个所以然出来,后来看了一下webpack官网,说建议安装node最新版本: 前提条件 在开始之前,请确保安装了 Node.js 的最新版本.使用 Node.js ...
- 基于ROS的分布式机器人远程控制平台
基于ROS的分布式机器人远程控制平台 1 结构说明 HiBot架构主要使用C/S架构,其中HibotServer为服务器,Muqutte为消息服务器中间件,HiBotClient为运行在机器人上的 ...
- 使用charles过滤网络请求
1.对网络请求进行过滤,只监控向指定目录服务器上发送的请求 有以下方法: (1)在Structure视图或者Sequence视图的Filter 栏中填入需要过滤出来的关键字(适合临时性封包过滤) 或者 ...
- react创建项目很慢,最后提示fetch failed的解决方法
$ cnpm install -g create-react-app //创建react全局变量 $ create-react-app my-app //创建一个react项目 国内使用 npm 速度 ...
- Jackson流式API
public class JacksonTester { public static void main(String args[]){ JacksonTester tester = new ...