解决VUEX刷新的时候出现数据消失

通常，我们在使用vue编写页面时，会需要使用vuex在组件间传递（或者说共同响应）同一个数据的变化。例如：用户的登录信息。

下面，我们使用传递用户登录信息的例子来一步步解决这个问题。

首先，我们的第一个问题是：我在一个组件（例如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化？（就是这么小白，/(ㄒoㄒ)/~~）

这个答案就是使用vuex啦，在中文版的文档中有这样一句话：

而这里的计算属性就是我们的伟大的computed属性啦~

（至于前面的通过mutation之类的把数据存入vuex中的过程就省略了，大家上网搜一下例子一大堆，切忌做伸手党哦~）

至于用在我们的用户登录的例子中就像是下面这样：

这样我们就可以在页面根据用户信息响应式地显示内容了。

那么，我们的第二个问题来了：我是获取到了vuex中的用户信息，但是我一刷新就没有了！！怎么办？？在线等！十万火急！！

这个答案就是使用localStorage啦。（了解过html 5的同学应该都知道它，这里我就不科普了。）

一开始我虽然知道可以用localStorage，但是对于使用的逻辑有点乱，所以在这里记一下。

1、在vuex获取到用户信息时（例：state.user_id = user_info.user_id），同时把这个信息存入localStorage（Lockr.set('user_id', state.user_id) 这个Lockr是我用了一个叫Lockr的东西，其实它就是localStorage而已，关于它详细的请看https://github.com/tsironis/lockr）；

2、我们定义一个mutation方法，再次把数据从localStorage传给state；

3、我们的问题发生在页面刷新时，可能很多同学就会去想在监听页面刷新事件时触发上面第2步的那个方法。其实不用这么麻烦，在computed属性时，只要我们判断一下用户信息是否为空，为空时调用第2步的那个方法就好了，然后我们把这个state return给那个响应属性就好了；

4、至于为什么这么麻烦在state和localStorage中传来传去，是因为state的值刷新后会没了，而localStorage的值不能响应式地变化（Vue 仅可以对其管理的数据做响应式处理，可以理解为 data 中的数据，localStorage 并不在 Vue 的管理下，自然不会有响应特性）；

下面直接上computed处的代码：

以上就是使用localStorage解决vuex的state的值在刷新之后没有了这个问题的方法。

方法二：

在mount里面commit一次

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js实现刷新当前页面的方法教程

    vue.js实现刷新当前页面的方法教程

    前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

  • 关于页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡

  • 解决VUEX刷新的时候出现数据消失

    解决VUEX刷新的时候出现数据消失

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一个问题是:我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化?(就是这么小白,/(ㄒoㄒ)/~~) 这个答案就是使用vuex啦,在中文版的文档中有这样一句话: 而这里的计算属性就是我们的伟大的computed属性啦~ (至于前面的通过mutation之类的把数据存入vuex

  • 解决vuex刷新数据消失问题

    前言 vue构建的单页大型项目中,可能会用到Vuex .Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新. 但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态.但是这个情况有时候并不是我们所希望的. 比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 解

  • 解决vuex刷新状态初始化的方法实现

    vuex五种基本对象 state:存储状态(变量) getters:对数据获取之前的再次编译,可以理解为state的计算属性.我们在组件中使用$sotre.getters.fun() mutations:修改状态,并且是同步的.在组件中使用$store.commit('',params).这个和我们组件中的自定义事件类似. actions:异步操作.在组件中使用是$store.dispath('') modules:store的子模块,为了开发大型项目,方便状态管理而使用的.这里我们就不解释了,

  • vuex刷新页面后如何解决丢失store的数据问题

    目录 vuex刷新页面后丢失store的数据 提出问题 解决方案 vuex刷新页面数据丢失(数据持久化) 存储到localStorage中 存储到sessionStorage中 指定数据持久化 总结 vuex刷新页面后丢失store的数据 提出问题 最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cooki

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • 解决vuex数据页面刷新后初始化操作

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  • 解决vuex数据异步造成初始化的时候没值报错问题

    当使用vue做登录的时候,我们会把拿到的部分用户信息存在vuex+cookie中,我们知道,vuex的数据是会随着浏览器刷新而丢失的,此时我们会重新请求接口对vuex的数据进行再次赋值,如下 当有cookie但是vuex没有数据的时候再次请求赋值 state mutation vuex的数据是异步的,当我们页面需要直接拿vuex的值进行渲染的时候,初始化瞬间(即请求过程进行的时候),vuex是没有这个值的,如何解决这个问题,暂时总结了三种方法,希望有遇到的大佬进行补充和查错: 1.通过watch

  • 解决vue刷新页面以后丢失store的数据问题

    刷新页面时vue实例重新加载,store就会被重置,可以把定义刷新前把store存入本地localStorage.sessionStorage.cookie中,localStorage是永久储存,重新打开页面时会读取上一次打开的页面数据,sessionStorage是储存到关闭为止,cookie不适合存大量数据.根据我的需求,最合适的是sessionStorage. beforeunload在页面刷新时触发,可以监听这个方法,让页面在刷新前存store到sessionStorage中. 当然,在

随机推荐