宝山网站制作,重庆网站建设哪个平台好,网站建设广告宣传素材,保定曲阳网站建设前言不知道大家有没有遇到过这样一种情况#xff1f; vuex中的state会在某一个组建中使用#xff0c;而这个状态的初始化是通过异步加载完成的。组件在渲染过程中#xff0c;获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了#xff0c;导致组件的数据没有…前言不知道大家有没有遇到过这样一种情况 vuex中的state会在某一个组建中使用而这个状态的初始化是通过异步加载完成的。组件在渲染过程中获取的state状态为空。也就是说组件在异步完成之前就已经完成渲染了导致组件的数据没有来得及渲染。问题举例举例说明如下// topo.vuecreated() {this.getUserAndSysIcons();},methods: {getUserAndSysIcons() {const self this;// 用户图标iconApi.getUserIcons().then(response {self.$store.dispatch(setUserIcons, response.data);});}}在topo.vue中created或者mounted完成的时候调用 getUserAndSysIcons() 异步初始化userIcons方便在其他组件中使用这个数据。// modifyhost.vuemounted() {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;}}最终效果以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
