Vuex 实际使用中的一点心得 —— 一刷新就没了
问题
在开发中,有一些全局数据,比如用户数据,系统数据等。这些数据很多组件中都会使用,我们当然可以每次使用的时候都去请求,但是出于程序员的“洁癖”、“抠”等等优点,还是希望一次请求,到处使用。
这时候很自然的想到存储在 localStorage
中,但是有个问题是,这些数据可能会变,如果没能及时同步的话,就会用到不正确的数据,即使做了数据同步,但是 localStorage
中的数据不是响应式的,不能自动更新使用到这些数据的地方。这时候就想要开始使用 vuex 了。
但是在使用 vuex 的时候也遇到很多问题,比如,“一刷新就没啦”:
vuex
的数据是存储在浏览器维护的内存中,页面刷新会重新初始化,简单的说,就是没了。localStorage
的数据是存储在浏览器维护的一个简单数据库里面,在本地文件中存储,所以可以“持久化”存在。
所以“一刷新就没啦”是很正常的,虽然现在很少需要用户去刷新页面,但是如果一刷新,数据没了,页面报错了,这也是无法接受的!
解决
比如:请求数据的接口都在 src/api
下面,其中用户相关的接口在 user.js
中;
然后在 store 下有个 userInfo.js
的 module,用来存储用户数据以供全局使用(关于 vuex 模块化可以参看官方文档):
store
|- modules
|- userInfo.js
|- index.js
userInfo.js
中定义了 state
, mutations
, actions
:
import { getUserInfo } from '@/api/user';
const state = {
user: null // 注意这里给的初始值是 null
}
const mutations = {
setUserinfo (state, params) {
state.user = params.user;
localStorage.user = JSON.stringify(state.user); // 可以顺手存入 localStorage 中
}
}
const actions = {
async userinfo ({ commit }) {
let ret = await getUserInfo();
if (ret.data.retInt) { // 假如请求的数据成功返回
commit('setUserinfo', {user: ret.data.retRes});
}
}
}
export default {
state,
mutations,
actions
}
可以在组件内 mounted
的时候判断 state.userInfo.user
是否存在,如果不存在,马上请求数据并设置到store
中:
mounted () {
if (!this.$store.state.userInfo.user) {
this.$store.dispatch('userinfo');
}
}
当然,这个判断并请求的时机不一定要放在当前组件内,对于全局数据,可以在App.vue
组件中去处理。
然后在组件内使用 store 中的数据,可以通过 computed
属性:
computed: {
userInfo () {
return this.$store.state.userInfo.user;
}
}
使用 computed
属性的好处就是数据缓存和响应式,详细的可以参看官方文档关于 computed
属性的介绍。
注意
假如,现在组件中中只需要使用到用户的 age
属性,你可能会这么写:
computed: {
userAge () {
return this.$store.state.userInfo.user.age;
}
}
然后,刷新页面,你就可能看到红红的一大片报错。
原因是,user
中的数据是异步请求来的,在组件渲染过程中使用 computed
的时候,user
中的数据还没有取回来,它的值是还是初始值,假如这个初始值是 null
,undefined
,那么读取 user.age
肯定会报错。最简单的办法就是初始值设置为 {}
一个空对象(mounted
中的判断方式要调整)当然也可以在 computed
中进行判断处理。
现在,可以愉快的使用 vuex 了!
以上是自己在开发中填了坑之后的一点点心得,欢迎大家指点!
原文地址:https://segmentfault.com/a/1190000016709931
Vuex 实际使用中的一点心得 —— 一刷新就没了的更多相关文章
- WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信
原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...
- 使用Webbrowser的一点心得体会
原文:使用Webbrowser的一点心得体会 自从用上VS2005后,发现多了个WebBrowser控件(.net 2003中不带),为图方便吧,有好多小工具就用这个写的,慢慢也有点体会了,总结一下, ...
- 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得
谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...
- 【并行计算与CUDA开发】基于NVIDIA显卡的硬编解码的一点心得 (完结)
原文:基于NVIDIA显卡的硬编解码的一点心得 (完结) 1.硬解码软编码方法:大体流程,先用ffmpeg来读取视频文件的包,接着开启两个线程,一个用于硬解码,一个用于软编码,然后将读取的包传给解码器 ...
- 从Eclipse转移到IntelliJ IDEA一点心得
http://www.ituring.com.cn/article/37792 本人使用IntelliJ IDEA其实并不太久,用了这段时间以后,觉得的确很是好用.刚刚从Eclipse转过来的很多人开 ...
- 关于使用Exception的一点心得
毫无疑问,Exception有很多优点.查看任何一本面向对象的书籍,都会提到异常相对于返回值标记状态的不足以及避免错误导致程序崩溃的问题.看起来是很好的,用起来也是很好的.可是这么多年过去了,异常用的 ...
- Qt中使用信号和槽的一点心得
信号(Signal)与槽(Slot)-Qt中的典型机制 这一篇文章中都说得很详细了,这里不再重复,只说一点在实际使用中可能会遇到的问题. 1.一个信号不要同时连接几个槽函数,不然执行的顺序是随机的,最 ...
- PHP学习路上的一点心得
继学些了java后,接触php的项目后发现 php真的也是很强大的一门语言,这只是一篇回想,想到什么就写什么把,大家随便看看. 1.php其实无需等待,一般的改完代码后直接刷新页面即可,不需要像jav ...
- vuex中store保存的数据,刷新页面会清空
用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...
随机推荐
- UINavigationController 的一些坑
坑一:自定义导航栏返回键 iOS7及之后版本 手势边缘右滑返回失效 解决方案: -(void)viewDidLoad{ [super viewDidLoad]; //self 为 UINavigati ...
- H - String painter
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
- MyBatis逆向工程中domainObjectRenamingRule报错或无效
使用domainObjectRenamingRule报错 在使用MyBatis逆向工程时报错如下: org.mybatis.generator.exception.XMLParserException ...
- [题解](树形dp/换根)小x游世界树
2. 小x游世界树 (yggdrasi.pas/c/cpp) [问题描述] 小x得到了一个(不可靠的)小道消息,传说中的神岛阿瓦隆在格陵兰海的某处,据说那里埋藏着亚瑟王的宝藏,这引起了小x的好奇,但当 ...
- Jmeter-提取Json数据进行关联
1:Json后置处理器提取结果作为下一个sampler的传入参数 1.1:[线程组]->[简单控制器]->[HTTP sampler]->[Beanshell后置取样器]-> ...
- ASP.NET经典的、封装好的ADO.NET类包
using System; using System.Collections; using System.Collections.Specialized; using System.Runtime.R ...
- 使用高性能Pipelines构建.NET通讯程序
.NET Standard支持一组新的API,System.Span, System.Memory,还有System.IO.Pipelines.这几个新的API极大了提升了.NET程序的效能,将来.N ...
- CSS浮动float父div没有高度的问题
如下所示,子元素 div2 本身具有高度和宽度,但由于其具有float:left:属性后.其父元素 div1 不具有高度. <html> <head> </h ...
- git stash暂存当前正在进行的工作
git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug, 先stash, 使返回到自己上一个comm ...
- Mysql优化配置
Mysql配置优化 一.环境介绍 Mysql版本:5.5.27 二.优化内容 字段 介绍 推荐值 skip-locking 避免MySQL的外部锁定,减少出错几率增强稳定性 back_log MySQ ...