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. Jmeter-【JSON Extractor】-响应结果中三级key取值

    一.请求返回样式 二.取第三个option 三.查看结果

  2. java script两个列表之间移动数据

    <select name="b1" id="hao" style="width:100px; height:200px;" size= ...

  3. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  4. NX二次开发-UFUN创建图层类别UF_LAYER_create_category

    NX11+VS2013 #include <uf.h> #include <uf_layer.h> UF_initialize(); //创建图层类别 UF_LAYER_cat ...

  5. P1650 赛马

    P1650 赛马 题目描述 我国历史上有个著名的故事: 那是在2300年以前.齐国的大将军田忌喜欢赛马.他经常和齐王赛马.他和齐王都有三匹马:常规马,上级马,超级马.一共赛三局,每局的胜者可以从负者这 ...

  6. CSS3:CSS3 背景

    ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...

  7. taskFactory

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. UVA 12676 Inverting Huffman

    题目链接:https://vjudge.net/problem/UVA-12676 题目大意 一串文本中包含 N 个不同字母,经过哈夫曼编码后,得到这 N 个字母的相应编码长度,求文本的最短可能长度. ...

  9. 15-MySQL-Ubuntu-数据表的查询-聚合函数(四)

    聚合函数 (1)count() 统计总数 查询男性总数 select count(*) as 男性 from students where gender=1; (2)max() 最大值 查询男性中年龄 ...

  10. 【POJ】1502 MPI Maelstrom

    题目链接:http://poj.org/problem?id=1502 题意:一个处理器给n-1个处理器发送广播,问最短时间.广播时并发,也就是各个路径就大的一方.输入如果是x的话说明两个处理器不能相 ...