vue 组件属性监听_详解vuex 中的 state 在组件中如何监听

前言

不知道大家有没有遇到过这样一种情况？ 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渲染为空。

思考

想的是，当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;

}

最终效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue 组件属性监听_详解vuex 中的 state 在组件中如何监听相关推荐

vue输入框输入触发事件_详解.vue文件中监听input输入事件（oninput）
详解.vue文件中监听input输入事件(oninput) .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变 ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
vue 代理设置访问图片_详解Vue源码之数据的代理访问
概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3 ...
0编译器详解_详解Java枚举类型（Enum）中的方法
文章前记程序员工作久了便可能整日忙碌于"增删改查"中,迷失方向,毫无进步. 该公众号致力于分享软件开发相关的原创干货,助你完成从程序员到架构师的进阶之路! 努力!做一个NB的Co ...
队列管理器连接数设置_详解！基于Redis解决业务场景中延迟队列的应用实践,你不得不服啊...
一.业务概述我们假定设置两个队列,一个队列维护正式工单,另一个队列维护挂起工单.对于挂起操作,我们通过Redis设置key有效时间,当key失效时,客户端监听失效事件,获取工单,实现挂起工单队列的 ...
一个vue文件应该有的成分_详解vue为什么要求组件模板只能有一个根元素
我是在知乎上看到的这个问题,转念一想,用了大半年的vue,好像真的没有了解过: '为什么只能有且只有一个根元素' 于是我花了二十多分钟去找了一下答案......竟然没有找到答案.... 好的现在我来说 ...
vue component created没有触发_详解在Vue中使用TypeScript的一些思考(实践)
Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个&qu ...
vue的props传数组_详解vue.js之props传递参数
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提 ...
python类的静态属性和静态方法_详解Python中的静态方法与类成员方法
前言因为Python的水平目前一直是处于能用阶段,平时写的脚本使用的Python的写法也比较的简单,没有写过稍微大一点的项目.对Python中的类,类之间的组织关系,整个项目中类之间如何耦合还缺乏认 ...

vue 组件属性监听_详解vuex 中的 state 在组件中如何监听

vue 组件属性监听_详解vuex 中的 state 在组件中如何监听相关推荐

最新文章

热门文章