详解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 相关文章推荐
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 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函数utf8转gb2312编码
2006/12/21 PHP
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
javascript的push使用指南
2014/12/05 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
js实现交通灯效果
2017/01/13 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
Python字符遍历的艺术
2008/09/06 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python with标签使用方法解析
2020/01/17 Python
python yield和Generator函数用法详解
2020/02/10 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
税务会计岗位职责
2014/02/18 职场文书
求职面试个人自我评价
2014/02/28 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
运动会开幕式致辞
2015/07/29 职场文书
高考升学宴主持词
2019/06/21 职场文书
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android