详解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 原型链学习总结
Oct 29 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
ajax与302响应代码测试
Oct 23 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
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多层数组与对象的转换实例代码
2013/08/05 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
js进行表单验证实例分析
2015/02/10 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python操作qml对象过程详解
2019/09/26 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python3通过udp实现组播数据的发送和接收操作
2020/05/05 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
请假条范文大全
2014/04/10 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers