您好,登錄后才能下訂單哦!
利用vuex怎么對state進行監(jiān)聽?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
問題舉例
舉例說明如下:
// topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用戶圖標 iconApi.getUserIcons().then(response => { self.$store.dispatch('setUserIcons', response.data); }); } }
在topo.vue中created或者mounted完成的時候調(diào)用 getUserAndSysIcons() 異步初始化userIcons,方便在其他組件中使用這個數(shù)據(jù)。
// modifyhost.vue mounted() { this.userIcons = this.$store.state.topo.userIcons; // 用戶圖標 }
在modifyhost.vue中渲染數(shù)據(jù)是,需要使用userIcons。在modifyhost.vue組件mounted完成的時候,userIcons數(shù)據(jù)還沒有被初始化。導(dǎo)致modifyhost.vue渲染為空。
思考
想的是,當topo.vue中異步獲取userIcons完成的時候,再去將modifyhost.vue組件中的userIcons初始化。這樣就會自動改變完成渲染。那么怎么知道異步什么時候完成呢?
于是就想到了vue一個好東西watch監(jiān)聽,監(jiān)聽某一個數(shù)據(jù)的變化。我們都知道是,很容易監(jiān)聽組件中局部數(shù)據(jù)的變化。那么,這里怎么去監(jiān)聽state中的變化呢?于是有利用了computed計算屬性。具體操作如下:
解決
在computed中寫一個計算屬性getUserIcons,返回狀態(tài)管理中的userIcons。然后在watch中監(jiān)聽這個計算屬性的變化,對modifyhost.vue中的userIcons重新賦值。
computed: { getUserIcons() { return this.$store.state.topo.userIcons; } }, watch: { getUserIcons(val) { this.userIcons = val; } }
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。