前言

不知道大家有沒有遇到過這樣一種情況？ 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 在组件中如何监听的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。