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刷新存储状态的更多相关文章

  1. Vuex 页面刷新后store保存的数据会丢失 取cookie值

    在store.js中 export default new vuex.Store({ // 首先声明一个状态 state state:{ pcid: '', postList: [], } //更新状 ...

  2. 2、vuex页面刷新数据不保留,解决方法(转)

    今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...

  3. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  4. vue——store全局存储

    业务场景:刷新页面时,首次拉取所有配置,存储到store状态管理用于全局调用: import Vue from 'vue' import Vuex from 'vuex' import userInf ...

  5. vuex数据持久化存储

    想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...

  6. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  7. Do not mutate vuex store state outside mutation handlers.

    组件代码: selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'sele ...

  8. 结合sessionStorage解决vuex页面刷新数据丢失的问题

    将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...

  9. [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 ...

随机推荐

  1. Python 面试中可能会被问到的30个问题

    第一家公司问的题目 1 简述解释型和编译型编程语言? 解释型语言编写的程序不需要编译,在执行的时候,专门有一个解释器能够将VB语言翻译成机器语言,每个语句都是执行的时候才翻译.这样解释型语言每执行一次 ...

  2. yii2 gridview checkbox

    给checkbox(在GridView里的)添加一个value 控制器:$dataProvidermStu->key = "student_no"; view:[ 'clas ...

  3. 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(): 删除 ...

  4. Android的ViewPager的学习

    这篇博客是对慕课网上看到的视频里学习到的知识的一些记录,让自己能够加深理解.视频地址:http://www.imooc.com/learn/1116 在这个视频中,目标是实现类似微信的主界面之间的切换 ...

  5. django 缓存信号等

    参考别人的博客:写的挺好 http://www.cnblogs.com/wupeiqi/articles/5246483.html

  6. 解决webpack打包报错: Cannot find module '@webassemblyjs/wasm-parser'

    出现这个错误时,百度和谷歌中都搜索不出个所以然出来,后来看了一下webpack官网,说建议安装node最新版本: 前提条件 在开始之前,请确保安装了 Node.js 的最新版本.使用 Node.js ...

  7. 基于ROS的分布式机器人远程控制平台

    基于ROS的分布式机器人远程控制平台   1 结构说明 HiBot架构主要使用C/S架构,其中HibotServer为服务器,Muqutte为消息服务器中间件,HiBotClient为运行在机器人上的 ...

  8. 使用charles过滤网络请求

    1.对网络请求进行过滤,只监控向指定目录服务器上发送的请求 有以下方法: (1)在Structure视图或者Sequence视图的Filter 栏中填入需要过滤出来的关键字(适合临时性封包过滤) 或者 ...

  9. react创建项目很慢,最后提示fetch failed的解决方法

    $ cnpm install -g create-react-app //创建react全局变量 $ create-react-app my-app //创建一个react项目 国内使用 npm 速度 ...

  10. Jackson流式API

    public class JacksonTester {   public static void main(String args[]){    JacksonTester tester = new ...