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. HTTP状态码及请求头

    状态码 状态码告知从服务器端返回的请求结果 一般可分为5个大类 1XX Informational(信息性状态码) 2XX Success(成功状态码) 3XX Redirection(重定向状态码) ...

  2. MySQL 刷题知识点整理

    1. left join on 与 right join on, inner join on 的区别: left join on 把左表中的行全部展示,而将寻找右表中符合的行展示: right joi ...

  3. dfs版容斥原理+剪枝——bzoj1853

    学了一种爆搜版+剪枝的容斥方法,即类似数位dp时按位进行容斥,同时需要在搜索过程中进行剪枝 /* 容斥原理,先在打出的表里筛掉所有倍数,然后用容斥原理+1个的倍数-2个lcm的倍数+3个lcm的倍数. ...

  4. 基于bootstrap的时间选择插件daterangepicker以及汉化方法

    双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件: 可以设定多个时间段选项:也可以自定义时间段:由用户自己选择起始时间和终止时间:时间段的最大跨度可以 ...

  5. 9.RabbitMQ Topic类型交换机

    RabbitMQ消息服务中Topic类型交换机根据通配符路由消息,*代表一个单词,#代表代表0或多个单词.   生产者 消费者   代码 Producer.java   package com.tes ...

  6. Centos7.5安装分布式Hadoop2.6.0+Hbase+Hive(CDH5.14.2离线安装tar包)

    Tags: Hadoop Centos7.5安装分布式Hadoop2.6.0+Hbase+Hive(CDH5.14.2离线安装tar包) Centos7.5安装分布式Hadoop2.6.0+Hbase ...

  7. Spring源码由浅入深系列六 CreateBean过程

  8. VIM 配色方案,先保存一下

    https://github.com/chriskempson/tomorrow-theme http://ethanschoonover.com/solarized http://ethanscho ...

  9. c# 编写windows 服务,并制作安装包

    对服务的认识有很多个阶段. 第一阶段:当时还在用c++,知道在一个进程里while(True){},然后里面做很多很多事情,这就叫做服务了,界面可能当时还用Console控制台程序. 第二阶段:知道了 ...

  10. 006-Java的break和continue

    break 和 continue关键字的使用 break: 结束当前循环 continue:结束当次循环 示例如下 class JavaTest{ public static void main(St ...