页面刷新 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 ...
随机推荐
- [BZOJ1791][IOI2008]Island岛屿(环套树DP)
同NOI2013快餐店(NOI出原题?),下面代码由于BZOJ栈空间过小会RE. 大致是对每个连通块找到环,在所有内向树做一遍DP,再在环上做两遍前缀和优化的DP. #include<cstdi ...
- [BZOJ5109][LOJ #6252][P4061][CodePlus 2017 11月赛]大吉大利,今晚吃鸡!(最短路+拓扑排序+传递闭包+map+bitset(hash+压位))
5109: [CodePlus 2017]大吉大利,晚上吃鸡! Time Limit: 30 Sec Memory Limit: 1024 MBSubmit: 107 Solved: 57[Sub ...
- hdu 2709 递推
题意:给出一个数,把他拆成2^n和的形式,问有多少种拆法 链接:点我 对6进行分析 1 1 1 1 1 1 1 1 1 1 2 1 1 2 2 1 1 4 2 2 4 2 4 对最上面4个,显然是由4 ...
- 内功心法 -- java.util.LinkedList<E> (5)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...
- HDU 5670 Machine 水题
Machine 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5670 Description There is a machine with m(2 ...
- IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) E. Bear and Forgotten Tree 2 bfs set 反图的生成树
E. Bear and Forgotten Tree 2 题目连接: http://www.codeforces.com/contest/653/problem/E Description A tre ...
- p3p sso
P3P是一种被称为个人隐私安全平台项目(the Platform for Privacy Preferences)的标准.能够保护在线隐私权,使Internet冲浪者能够选择在浏览网页时,是否被第三方 ...
- msgrcv,msgsnd进程通信,消息的发送和接收
//进程通信,消息的发送和接收 //client.c #include <unistd.h> #include <sys/types.h> #include <sys/s ...
- IDE的文件和代码模板
设置IDE的的模板,可以在创建文件的时候,自动产生模板内容,模板里可以 模板头设置: # -*- coding: utf- -*- """ --------------- ...
- Informatica 常用组件Source Qualifier之五 User Defined Join
User defined join : 输入用户定义的联接与输入自定义 SQL 查询类似.但是,只需输入 WHERE 子句的内容,而不是整个查询. 添加用户定义的联接时,源限定符转换包括默认 ...