页面刷新 vuex 数据重新被初始化
1、原因
vuex里用来存储的也只是一个全局变量,当页面刷新,该全局变量自然不存在了。
2、解决
使用localStorage存储一份
(1)storage.js
/**
* vuex localStorage plugin
*/
const IS_ALL = 0 export default function storagePlugin({ namespace = 'mfg-vux-',
storage = localStorage,
persistence = []
} = {}) { let serialize = JSON.stringify,
deserialize = JSON.parse,
isAll = persistence.length === IS_ALL /**
* 获取持久化的state
* @param {[type]} state [description]
* @return {[type]} [description]
*/
function getState(state) { let data = {},
keys = isAll ? Object.keys(state) : persistence,
i = 0,
len = keys.length for (; i < len; i++) { let key = keys[i],
value = deserialize(storage.getItem(namespace + key)) data[key] = value === null ? state[key] : value
} return data
} /**
* 持久化state
* @param {[type]} state [description]
*/
function setState(state) { let keys = isAll ? Object.keys(state) : persistence,
i = 0,
len = keys.length for (; i < len; i++) { let key = keys[i] storage.setItem(namespace + key, serialize(state[key]))
}
} return store => { let state = store.state // 初始化state
store.replaceState( _.merge( {},
state,
getState(state)
)
) // 持久化state
store.subscribe((mutation, state) => { setState(state)
})
}
}
(2)vuex部分代码
import storage from './plugins/storage'
export default new Vuex.Store({ state,
mutations,
getters,
actions,
plugins: [storage({ // 要保存的变量
persistence: ['testText']
})],
strict: process.env.NODE_ENV !== 'production'
})
变量在localestorage中被保存了:
页面刷新 vuex 数据重新被初始化的更多相关文章
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用 store.sub ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
- vue:vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- JS页面刷新保持数据不丢失
转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...
- djano modles values+ajax实现无页面刷新更新数据
做项目的过程中想通过不刷新页面的方式来进行页面数据刷新,开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化.发现可以行,但是 ...
- 2、vuex页面刷新数据不保留,解决方法(转)
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
随机推荐
- Stirling数,Bell数,Catalan数,Bernoulli数
组合数学的实质还是DP,但是从通式角度处理的话有利于FFT等的实现. 首先推荐$Candy?$的球划分问题集合: http://www.cnblogs.com/candy99/p/6400735.ht ...
- MySQL启动项提权
关于MySQL的启动项提权,听其名知其意.就是将一段 VBS脚本导入到 C:\Documents and Settings\All Users\「开始」菜单\程序\启动 下,如果管理员重启了服务器, ...
- April Fools Day Contest 2016 A. Da Vinci Powers
A. Da Vinci Powers 题目连接: http://www.codeforces.com/contest/656/problem/A Description The input conta ...
- 使用本地的Nuget Repository加速Nuget访问速度
Nuget是一个在VisualStudio下的非常好用的包管理器,然而由于众所周知的原因,其访问速度非常令人抓狂,甚至抽风.在没有VPN的环境下,如何解决这一问题呢?常见的解决方案是自己搭建一个Nug ...
- HDU 4696 Answers (2013多校10,1001题 )
Answers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total S ...
- 查看系统自带的RPM
我在home目录下创建了目录mei 1.管理员权限 su 2.进入mei目录 cd /home/mei 3.创建cdrom目录作为挂载点 mkdir cdrom 4.把目录 /dev/cdrom-hd ...
- weblogic打补丁,bsu方法
刚装了10.3.6版本的weblogic,想把版本补丁到10.3.6.0.12 我用的系统是windows 8.1 ,呵呵 查看版本 执行java weblogic.version WebLogic ...
- Android Binder总结
1. MediapplayerService 的启动,怎样在ServiceManager注冊的,不解说详细的细节 ServiceManager 是整个系统的Service总管,其余的系统服务都是通过d ...
- Androidclient与服务端交互之登陆演示样例
今天了解了一下androidclient与服务端是如何交互的,发现事实上跟web有点类似吧,然后网上找了大神的登陆演示样例.是基于IntentService的 1.后台使用简单的servlet,支持G ...
- UIBezierPath的使用(持续更新)
UIBezierPath的使用 1. 使用UIBezierPath绘制多边形 // 获取path UIBezierPath *aPath = [UIBezierPath bezierPath]; // ...