詳解vuex 中的 state 在組件中如何監(jiān)聽
前言
不知道大家有沒有遇到過這樣一種情況？ vuex中的state會(huì)在某一個(gè)組建中使用，而這個(gè)狀態(tài)的初始化是通過異步加載完成的。組件在渲染過程中，獲取的state狀態(tài)為空。也就是說組件在異步完成之前就已經(jīng)完成渲染了，導(dǎo)致組件的數(shù)據(jù)沒有來得及渲染。
問題舉例
舉例說明如下：
// topo.vue
created() {
this.getUserAndSysIcons();
},
methods: {
getUserAndSysIcons() {
const self = this;
// 用戶圖標(biāo)
iconApi.getUserIcons().then(response => {
self.$store.dispatch('setUserIcons', response.data);
});
}
}
在topo.vue中created或者mounted完成的時(shí)候調(diào)用 getUserAndSysIcons() 異步初始化userIcons，方便在其他組件中使用這個(gè)數(shù)據(jù)。
// modifyhost.vue
mounted() {
this.userIcons = this.$store.state.topo.userIcons; // 用戶圖標(biāo)
}
在modifyhost.vue中渲染數(shù)據(jù)是，需要使用userIcons。在modifyhost.vue組件mounted完成的時(shí)候，userIcons數(shù)據(jù)還沒有被初始化。導(dǎo)致modifyhost.vue渲染為空。
思考
想的是，當(dāng)topo.vue中異步獲取userIcons完成的時(shí)候，再去將modifyhost.vue組件中的userIcons初始化。這樣就會(huì)自動(dòng)改變完成渲染。那么怎么知道異步什么時(shí)候完成呢？
于是就想到了vue一個(gè)好東西watch監(jiān)聽，監(jiān)聽某一個(gè)數(shù)據(jù)的變化。我們都知道是，很容易監(jiān)聽組件中局部數(shù)據(jù)的變化。那么，這里怎么去監(jiān)聽state中的變化呢？于是有利用了computed計(jì)算屬性。具體操作如下：
解決
在computed中寫一個(gè)計(jì)算屬性getUserIcons,返回狀態(tài)管理中的userIcons。然后在watch中監(jiān)聽這個(gè)計(jì)算屬性的變化，對modifyhost.vue中的userIcons重新賦值。
computed: {
getUserIcons() {
return this.$store.state.topo.userIcons;
}
},
watch: {
getUserIcons(val) {
this.userIcons = val;
}
}
最終效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue data對象重新賦值無效(未更改)的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 多選框所選數(shù)量動(dòng)態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過ref屬性、v-model指令和計(jì)算屬性等特性實(shí)現(xiàn)元素高度的動(dòng)態(tài)調(diào)整,文章詳細(xì)介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動(dòng)態(tài)改變元素的高度,并通過多個(gè)示例展示其應(yīng)用2024-09-09
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
使用Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼功能
本文章主要來介紹一下第一個(gè)階段，也就是前端校驗(yàn)的驗(yàn)證碼的實(shí)現(xiàn)，下面來介紹一下拖動(dòng)驗(yàn)證碼的具體實(shí)現(xiàn)。這篇文章主要介紹了利用 Vue 實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼,需要的朋友可以參考下2019-06-06
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下2023-09-09
Vue利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制
這篇文章主要為大家詳細(xì)介紹了Vue如何利用自定義指令實(shí)現(xiàn)按鈕權(quán)限控制效果，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以參考下2023-05-05
Vue實(shí)現(xiàn)父子組件傳值其實(shí)不難
這篇文章主要介紹了Vue實(shí)現(xiàn)父子組件傳值其實(shí)不難問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)橫向時(shí)間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了微信jssdk邏輯在vue中的運(yùn)用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11