前言
不知道大家有沒有遇到過這樣一種情況？ 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;
}
}複製程式碼最終效果
