问题

在开发中,有一些全局数据,比如用户数据,系统数据等。这些数据很多组件中都会使用,我们当然可以每次使用的时候都去请求,但是出于程序员的“洁癖”、“抠”等等优点,还是希望一次请求,到处使用。

这时候很自然的想到存储在 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 中的数据还没有取回来,它的值是还是初始值,假如这个初始值是 nullundefined,那么读取 user.age 肯定会报错。最简单的办法就是初始值设置为 {} 一个空对象(mounted中的判断方式要调整)当然也可以在 computed 中进行判断处理。

现在,可以愉快的使用 vuex 了!

以上是自己在开发中填了坑之后的一点点心得,欢迎大家指点!

React和Vue中,是如何监听变量变化的

原文地址:https://segmentfault.com/a/1190000016709931

Vuex 实际使用中的一点心得 —— 一刷新就没了的更多相关文章

  1. WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  2. 使用Webbrowser的一点心得体会

    原文:使用Webbrowser的一点心得体会 自从用上VS2005后,发现多了个WebBrowser控件(.net 2003中不带),为图方便吧,有好多小工具就用这个写的,慢慢也有点体会了,总结一下, ...

  3. 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得

    谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...

  4. 【并行计算与CUDA开发】基于NVIDIA显卡的硬编解码的一点心得 (完结)

    原文:基于NVIDIA显卡的硬编解码的一点心得 (完结) 1.硬解码软编码方法:大体流程,先用ffmpeg来读取视频文件的包,接着开启两个线程,一个用于硬解码,一个用于软编码,然后将读取的包传给解码器 ...

  5. 从Eclipse转移到IntelliJ IDEA一点心得

    http://www.ituring.com.cn/article/37792 本人使用IntelliJ IDEA其实并不太久,用了这段时间以后,觉得的确很是好用.刚刚从Eclipse转过来的很多人开 ...

  6. 关于使用Exception的一点心得

    毫无疑问,Exception有很多优点.查看任何一本面向对象的书籍,都会提到异常相对于返回值标记状态的不足以及避免错误导致程序崩溃的问题.看起来是很好的,用起来也是很好的.可是这么多年过去了,异常用的 ...

  7. Qt中使用信号和槽的一点心得

    信号(Signal)与槽(Slot)-Qt中的典型机制 这一篇文章中都说得很详细了,这里不再重复,只说一点在实际使用中可能会遇到的问题. 1.一个信号不要同时连接几个槽函数,不然执行的顺序是随机的,最 ...

  8. PHP学习路上的一点心得

    继学些了java后,接触php的项目后发现 php真的也是很强大的一门语言,这只是一篇回想,想到什么就写什么把,大家随便看看. 1.php其实无需等待,一般的改完代码后直接刷新页面即可,不需要像jav ...

  9. vuex中store保存的数据,刷新页面会清空

    用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...

随机推荐

  1. sql 语句 替换字段的一些内容

    update t_table set field = replace(field,'替换内容','替换为');

  2. flask环境安装

    virtualenv venv #创建venv .venv/bin/activate #进入venv venv/bin/pip install flask venv/bin/pip install f ...

  3. JMETER通过java代码通过代码/ JMETER API实现示例进行负载测试

    本教程试图解释Jmeter的基本设计,功能和用法,Jmeter是用于在应用程序上执行负载测试的优秀工具.通过使用jmeter GUI,我们可以根据我们的要求为请求创建测试样本并执行具有多个用户负载的样 ...

  4. collections 中 typing 中对象的引用

    from typing import ( Callable as Callable, Container as Container, Hashable as Hashable, Iterable as ...

  5. Django的锁和事务

    Django的锁和事务 锁 select_for_update(nowait=False, skip_locked=False) 返回一个锁住行直到事务结束的查询集,如果数据库支持,它将生成一个 SE ...

  6. CF #541div2 E

    题目本质:忽略串的变化,只记载26个字母的相关变化. 解决方法: 在上一次与本次的转移过程中,情况并不多,主要取决于本次串的首尾字母,若不是本次的首尾字母,会被置1:如果是的话,分情况接一下并更新.另 ...

  7. 顾问Advisor Aspectj注解

    顾问Advisor  通知 advice PointcutAdvisor  一个接口  是顾问的一种. . 任意单个字符 + 重复1到多次 * 重复0到多次 NameMetchMethodPointc ...

  8. React-redux及异步获取数据20分钟快速入门

    一, 写在前面 1. 前面我写过一个vuex10分钟入门 传送门 2. React-redux网上有好多文档,又臭又长,明明很简单的问题,硬是让新人更晕了~, 我写这个文章的目的是让新人在20分钟之内 ...

  9. drupal6提示 Compilation failed: disallowed Unicode code point (>= 0xd800 && <= 0xdfff) at offset 9 on line 615

    解决办法:将sites\all\modules\ctools\includes\cleanstring.inc文件中的61行改成62行这样子即可,如下图

  10. 初探ant design pro

    1.增加路由子页面&配置菜单 因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析.按照如下的步骤做即可 PS.如果想要给菜单 ...