npm安装vuex及防止页面刷新数据丢失
npm install vuex
在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); const state={
accountInfo:{ }
} const mutations={
initUser(state,payload){
state.accountInfo=Object.assign(state.accountInfo,payload);
localStorage.setItem('accountInfo',JSON.stringify(state.accountInfo));
},
clear(state){
state.accountInfo={ }
}
}
//防止页面刷新vuex中的数据丢失
for(var item in state){
localStorage.getItem(item)?state[item] = JSON.parse(localStorage.getItem(item)): false;
} export default new Vuex.Store({
state,
mutations
})
npm安装vuex及防止页面刷新数据丢失的更多相关文章
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- 结合sessionStorage解决vuex页面刷新数据丢失的问题
将需要保存在vuex中的数据同时保存在sessionStorage中即可: import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); ...
- vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- vue页面刷新数据丢失问题
参考: https://blog.csdn.net/aliven1/article/details/80743470 https://blog.csdn.net/liang37712 ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- 2、vuex页面刷新数据不保留,解决方法(转)
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- Vuex数据页面刷新丢失问题解决方案
用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...
- 解决vuex保存的数据刷新页面时清空
参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
随机推荐
- 网络编程之TCP协议怎么使用?
TCP 通信的客户端:向服务器发送连接请求,给服务器发送数据,读取服务器会写的数据 表示客户端的类: java.net.Socket;此类实现客户端套接字.套接字是两台机器间通信的端点 套接字:包含了 ...
- 【JZOJ6285】飘雪圣域
description analysis 从求联通块出发根本没做法,于是考虑连通块里面的边 对于一个询问\([l,r]\),一条边的左端点\(≥l\)且右端点\(≤r\)才在这个区间的点之间 于是对于 ...
- thinkphp读取配置
无论何种配置文件,定义了配置文件之后,都统一使用系统提供的C方法(可以借助Config单词来帮助记忆)来读取已有的配置. 获取已经设置的参数值:C('参数名称') 例如, $model = C('UR ...
- 小程序生成海报:通过 json 配置方式轻松制作一张海报图
背景 由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈.而小程序 ...
- 23 Pro/E二次开发中的问题记录
0 引言 由于项目中涉及到Pro/E的二次开发技术,因此在边用边学的情况下,解决了不少问题,也积攒了不少问题.其中有些问题可能不是调个函数就能搞定的,得了解CAD底层的东西. 1 问题描述 (1)CA ...
- php 类静态变量 和 常量消耗内存及时间对比
在对类执行100w次循环后, 常量最快,变量其次,静态变量消耗时间最高 其中: 常量消耗:101.1739毫秒 变量消耗:2039.7689毫秒 静态变量消耗:4084.8911毫秒 测试代码: cl ...
- (转)C++实现RTMP协议发送H.264编码及AAC编码的音视频,摄像头直播
转:http://www.cnblogs.com/haibindev/archive/2011/12/29/2305712.html C++实现RTMP协议发送H.264编码及AAC编码的音视频 RT ...
- 秒懂机器学习---k临近算法(KNN)
秒懂机器学习---k临近算法(KNN) 一.总结 一句话总结: 弄懂原理,然后要运行实例,然后多解决问题,然后想出优化,分析优缺点,才算真的懂 1.KNN(K-Nearest Neighbor)算法的 ...
- bootstrap中container和container-fluid的区别
container和container-fluid 在bootstrap中,两者都是设置文本居中,但是它们还是有很大差别的 container 是随屏幕宽度的变化而变化的,是阶段性变化,有一个随浏览器 ...
- beaglebone black 与电脑互传文件(夹)
1. PSCP方法 PSCP,是putty的一个组件. 1.1 下载PSCP 先给连接http://www.chiark.greenend.org.uk/~sgtatham/putty/downloa ...