详解vuex 中的 state 在组件中如何监听


Posted in Javascript onMay 23, 2017

前言

不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的。组件在渲染过程中,获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染。

问题举例

举例说明如下:

// topo.vue
created() {
  this.getUserAndSysIcons();
},
methods: {
  getUserAndSysIcons() {
    const self = this;
    // 用户图标
    iconApi.getUserIcons().then(response => {
    self.$store.dispatch('setUserIcons', response.data);
    });
  }
}

在topo.vue中created或者mounted完成的时候调用 getUserAndSysIcons() 异步初始化userIcons,方便在其他组件中使用这个数据。

// modifyhost.vue
mounted() {
  this.userIcons = this.$store.state.topo.userIcons; // 用户图标
}

在modifyhost.vue中渲染数据是,需要使用userIcons。在modifyhost.vue组件mounted完成的时候,userIcons数据还没有被初始化。导致modifyhost.vue渲染为空。

详解vuex 中的 state 在组件中如何监听

思考

想的是,当topo.vue中异步获取userIcons完成的时候,再去将modifyhost.vue组件中的userIcons初始化。这样就会自动改变完成渲染。那么怎么知道异步什么时候完成呢?

于是就想到了vue一个好东西watch监听,监听某一个数据的变化。我们都知道是,很容易监听组件中局部数据的变化。那么,这里怎么去监听state中的变化呢?于是有利用了computed计算属性。具体操作如下:

解决

在computed中写一个计算属性getUserIcons,返回状态管理中的userIcons。然后在watch中监听这个计算属性的变化,对modifyhost.vue中的userIcons重新赋值。

computed: {
  getUserIcons() {
    return this.$store.state.topo.userIcons;
  }
},
watch: {
  getUserIcons(val) {
    this.userIcons = val;
  }
}

最终效果

详解vuex 中的 state 在组件中如何监听

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
基于jquery插件编写countdown计时器
Jun 12 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
BootStrap表单控件之文本域textarea
May 23 #Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 #Javascript
vue实现app页面切换动画效果实例
May 23 #Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 #Javascript
JavaScript设置名字输入不合法的实现方法
May 23 #Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 #Javascript
微信小程序request出现400的问题解决办法
May 23 #Javascript
You might like
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
Yii中表单用法实例详解
2016/01/05 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
拖动一个HTML元素
2006/12/22 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
js时间控件只显示年月
2017/01/08 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详解使用vue实现tab 切换操作
2017/07/03 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
python中metaclass原理与用法详解
2019/06/25 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python中count函数知识点浅析
2020/12/17 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python