vuex管理状态 刷新页面保持不被清空的解决方案
mutation文件
import {
RECEIVE_PUBLICHTIT
} from './mutation-types'
//保证刷新页面数据不消失*
function storeLocalStore (state) {
window.localStorage.setItem("publicTit",JSON.stringify(state));
}
export default {
[RECEIVE_PUBLICHTIT] (state,{title}){
state.publicTit = title
storeLocalStore(state)
}
}
用到publicTit属性的组件
created(){
localStorage.getItem("publicTit")&&
this.$store.replaceState(JSON.parse(localStorage.getItem("publicTit")))
},
在created()生命周期中进行取值操作，这时需要判断第一次加载项目的时，localStorage没有publicTit的信息，所以先判断一下
实现思路 让vuex中publicTit的状态和localStorage中保持一致（从localStorage中取值）
优化版：
需要调用属性的组件
created(){
//在页面加载时读取localStorage状态 复制对象是解决新vuex管理的状态中新添加的字段也可以存入localStorage中
localStorage.getItem("publicTit") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("publicTit"))));
//在页面刷新时将vuex里的信息保存到localStorage里，避免多次调用localStorage进行存储降低性能,beforeunload是在页面刷新之前调用
window.addEventListener("beforeunload",()=>{
localStorage.setItem("publicTit",JSON.stringify(this.$store.state))
})
}
以上这篇vuex管理状态 刷新页面保持不被清空的解决方案就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
我的应用程序使用Firebase API进行用户身份验证，将登录状态保存为Vuex状态下的布尔值。 当用户登录时，我设置登录状态并相应地有条件地显示登录/注销按钮。 但是当页面刷新时，vue应用的状态丢失并重置为默认 这会导致一个问题，即使用户登录并刷新页面，登录状态也会被设置为false，并且显示登录按钮而不是注销按钮，即使用户保持登录状态... 我该怎么做才能防止这种行为 我应该使用cooki
-
本文向大家介绍vuex页面刷新导致数据丢失的解决方案，包括了vuex页面刷新导致数据丢失的解决方案的使用技巧和注意事项，需要的朋友参考一下 解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中，当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along v
-
本文向大家介绍页面刷新后vuex的state数据丢失怎么解决？相关面试题，主要包含被问及页面刷新后vuex的state数据丢失怎么解决？时的应答技巧和注意事项，需要的朋友参考一下 监听浏览器刷新前的事件，在浏览器刷新之前就把vuex里的数据保存至sessionStorage中，刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据，否则获取vuex里的数据。
-
本文向大家介绍vue单页应用在页面刷新时保留状态数据的方法，包括了vue单页应用在页面刷新时保留状态数据的方法的使用技巧和注意事项，需要的朋友参考一下 在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你 一、问题 现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷
-
本文向大家介绍Vue 2.X的状态管理vuex记录详解，包括了Vue 2.X的状态管理vuex记录详解的使用技巧和注意事项，需要的朋友参考一下 记住上述的顺序情况：想要改变state，只能通过Mutation，虽然action可以直接改变state，这样会使每个状态可以方便的跟踪和记录（用Devtools跟踪） vue Method ---> Actions ---> Mutions -
-
本文向大家介绍vuex页面刷新后数据丢失的方法，包括了vuex页面刷新后数据丢失的方法的使用技巧和注意事项，需要的朋友参考一下 1. 原因 （1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。 （2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。 （3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Stor