詳解vuex 中的 state 在組件中如何監(jiān)聽
前言
不知道大家有沒有遇到過這樣一種情況？ vuex中的state會在某一個組建中使用，而這個狀態(tài)的初始化是通過異步加載完成的。組件在渲染過程中，獲取的state狀態(tài)為空。也就是說組件在異步完成之前就已經(jīng)完成渲染了，導(dǎo)致組件的數(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ù)還沒有被初始化。導(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue data對象重新賦值無效(未更改)的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 多選框所選數(shù)量動態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過ref屬性、v-model指令和計算屬性等特性實現(xiàn)元素高度的動態(tài)調(diào)整,文章詳細介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動態(tài)改變元素的高度,并通過多個示例展示其應(yīng)用2024-09-09
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本文章主要來介紹一下第一個階段，也就是前端校驗的驗證碼的實現(xiàn)，下面來介紹一下拖動驗證碼的具體實現(xiàn)。這篇文章主要介紹了利用 Vue 實現(xiàn)滑動驗證碼,需要的朋友可以參考下2019-06-06
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過濾器,需要的朋友可以參考下2023-09-09
Vue利用自定義指令實現(xiàn)按鈕權(quán)限控制
這篇文章主要為大家詳細介紹了Vue如何利用自定義指令實現(xiàn)按鈕權(quán)限控制效果，文中的示例代碼講解詳細，具有一定的學(xué)習(xí)價值，需要的可以參考下2023-05-05
這篇文章主要介紹了Vue實現(xiàn)父子組件傳值其實不難問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題
這篇文章主要介紹了Vue3.x的版本中build后dist文件中出現(xiàn)legacy的js文件問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)橫向時間軸，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了微信jssdk邏輯在vue中的運用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11