詳解vuex 中的 state 在組件中如何監(jiān)聽
前言
不知道大家有沒有遇到過這樣一種情況？ vuex中的state會在某一個組建中使用，而這個狀態(tài)的初始化是通過異步加載完成的。組件在渲染過程中，獲取的state狀態(tài)為空。也就是說組件在異步完成之前就已經(jīng)完成渲染了，導致組件的數(shù)據(jù)沒有來得及渲染。
問題舉例
舉例說明如下：
// 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ù)還沒有被初始化。導致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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue.js作為現(xiàn)代前端開發(fā)中的佼佼者,其組件系統(tǒng)是構建高效、靈活和可擴展用戶界面的關鍵,本文帶大家深度探索?Vue.js?組件的核心奧義,感興趣的小伙伴可以了解下2024-12-12
下面小編就為大家分享一篇Vue.js 點擊按鈕顯示/隱藏內(nèi)容的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了快速解決element的autofocus失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue刷新頁面時去閃爍提升用戶體驗效果的實現(xiàn)方法
這篇文章主要介紹了vue刷新頁面時去閃爍提升體驗方法,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-12-12
本篇文章主要介紹了在vue中獲取dom元素內(nèi)容的方法，可以通過給標簽加ref屬性，這里整理了詳細的代碼,有興趣的可以了解一下2017-07-07
Vue3中Slot插槽透傳,二次封裝Arco的table組件詳解
這篇文章主要介紹了Vue3中Slot插槽透傳,二次封裝Arco的table組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
v-model可以實現(xiàn)數(shù)據(jù)的雙向綁定,也是vue的最突出的優(yōu)勢,其實 v-model 實際上是一個語法糖,本文將給大家介紹一下vue中v-model的實現(xiàn)原理,文中有相關的代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-12-12
解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysical
這篇文章主要介紹了解決vue2使用腳手架配置prettier報錯prettier/prettier:context.getPhysicalFilename is not a function問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了Vue框架和前后端開發(fā)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
本文主要介紹了vue2+elementui進行hover提示的使用，主要分為外部和內(nèi)部，具有一定的參考價值，感興趣的可以了解一下2021-11-11