vue3-vuex異步請求數據后的數據處理的問題

有這么一個需求,現在要從服務器請求回來一組數據,然后將它渲染到頁面上

顯然這個需求需要用到vuex和vue組件

那么實現的思路就應該是這樣的

先在vuex的action中請求數據,代碼大概是這樣的

    actions: {
        async getHomeBaseData({ commit }) {
    
            const { data} = await homeBaseData()
            //存入數據到state
            commit('changeArticleCount', data.articleCount)
　　　　　　　　
            }
        },
    },    

當然,這個action要在組件內被調用觸發

const store = useStore()
store.dispatch('getHomeBaseData')
const articleCount = store.state.articleCoun

如果沒啥問題的話,下面就該從state中取數據了,問題就出在這里

由於action中是異步請求,所以結果並不會如期那樣,原因很簡單

組件內的這段代碼發現有異步請求,會先將同步代碼執行完再執行異步代碼,這樣一來

articleCount 的值就只是state的初始值,但是在devtools里可以看到數值的確是變化了的

所以我們只需要讓組件中的articleCount能接收到state中的變化即可,
沒錯,就是響應式,
在vue3中,使用computed來使變量具有響應式

const articleCount =computed(() => {
    return store.state.articleCount
})

完美解決!

需要注意的一點是:

解構操作會使數據的響應式效果丟失,需要使用toRef來使解構的對象保持響應式

使用watchEffect可以檢測到數據是發生了兩次變化的,如果使用時數據是必須的,那么請考慮給響應的數據一個默認值~~,TypeScript中也可以使用?來判斷是否存在值()

如果數據過多可以考慮封裝一個工具類,配合mapState使用~~~

----------------------------------------

 

另外,webpack的require居然會把指定目錄下所有文件跑一遍,一個圖標包一萬多個文件,熱更新居然要等半分鍾!!!

還是vite好用!!強烈推薦