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及防止页面刷新数据丢失的更多相关文章

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

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

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

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

  3. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  4. vue页面刷新数据丢失问题

    参考: https://blog.csdn.net/aliven1/article/details/80743470          https://blog.csdn.net/liang37712 ...

  5. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

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

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

  7. Vuex数据页面刷新丢失问题解决方案

    用Vue做项目开发很久了,对于vuex能用.会用,但是因为状态脱离页面和刷新丢失两个原因,一直都有种抵触,特别是一些简单的数据都是通过query或者本地存储就解决了,然而对于一些复杂内容,不可避免的还 ...

  8. 解决vuex保存的数据刷新页面时清空

    参考文章: vuex中store保存的数据,刷新页面会清空 主要解决代码: 1.更改store文件下index文件state的定义 const store = new Vuex.Store({ sta ...

  9. 页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...

随机推荐

  1. awk 一 文本处理工具

    简介 awk 是逐行扫描文件(从第1行到最后一行),寻找含有目标文本的行: 如果匹配成功,则会在该行上执行用户想要的操作. 反之,则不对行做任何处理. awk 命令的基本格式为: awk [选项] ' ...

  2. Nginx的静态代理

    Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...

  3. $My$ $template$(持续更新)

    树链剖分:(来源:树的统计) #include<bits/stdc++.h> #define rint register int using namespace std; inline v ...

  4. Vue实现一个学生信息录入系统,实现录入和删除

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. NX二次开发-UFUN获取球的参数UF_MODL_ask_sphere_parms

    NX11+VS2013 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize( ...

  6. NX二次开发-查询信息窗口是否打开UF_UI_is_listing_window_open

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //打开信息窗口 UF_UI_open_listing_window() ...

  7. python3 线程 threading.Thread GIL性能详解(2.3)

    python3 线程 threading 最基础的线程的使用 import threading, time value = 0 lock = threading.Lock() def change(n ...

  8. PAT_A1102#Invert a Binary Tree

    Source: PAT A1102 Invert a Binary Tree (25 分) Description: The following is from Max Howell @twitter ...

  9. python调用tushare获取沪股通、深股通成份股数据

    接口:hs_const 描述:获取沪股通.深股通成分数据 注:tushare库下载和初始化教程,请查阅我之前的文章 输入参数 名称      |      类型      |      必选      ...

  10. Codeforces 479【B】div3

    题目链接: http://codeforces.com/problemset/problem/977/B 题意:字符串,找固定长度为2的重复子串出现次数最多的. 题解:我暴力做的.暴力出奇迹. #in ...