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开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
随机推荐
- awk 一 文本处理工具
简介 awk 是逐行扫描文件(从第1行到最后一行),寻找含有目标文本的行: 如果匹配成功,则会在该行上执行用户想要的操作. 反之,则不对行做任何处理. awk 命令的基本格式为: awk [选项] ' ...
- Nginx的静态代理
Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...
- $My$ $template$(持续更新)
树链剖分:(来源:树的统计) #include<bits/stdc++.h> #define rint register int using namespace std; inline v ...
- Vue实现一个学生信息录入系统,实现录入和删除
效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- NX二次开发-UFUN获取球的参数UF_MODL_ask_sphere_parms
NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize( ...
- NX二次开发-查询信息窗口是否打开UF_UI_is_listing_window_open
#include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...
- python3 线程 threading.Thread GIL性能详解(2.3)
python3 线程 threading 最基础的线程的使用 import threading, time value = 0 lock = threading.Lock() def change(n ...
- PAT_A1102#Invert a Binary Tree
Source: PAT A1102 Invert a Binary Tree (25 分) Description: The following is from Max Howell @twitter ...
- python调用tushare获取沪股通、深股通成份股数据
接口:hs_const 描述:获取沪股通.深股通成分数据 注:tushare库下载和初始化教程,请查阅我之前的文章 输入参数 名称 | 类型 | 必选 ...
- Codeforces 479【B】div3
题目链接: http://codeforces.com/problemset/problem/977/B 题意:字符串,找固定长度为2的重复子串出现次数最多的. 题解:我暴力做的.暴力出奇迹. #in ...