有這麼乙個需求,現在要從伺服器請求回來一組資料,然後將它渲染到頁面上
顯然這個需求需要用到vuex和vue元件
那麼實現的思路就應該是這樣的
先在vuex的action中請求資料,**大概是這樣的
actions: ) =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(() =>)完美解決!
需要注意的一點是:
解構操作會使資料的響應式效果丟失,需要使用toref來使解構的物件保持響應式
使用watcheffect可以檢測到資料是發生了兩次變化的,如果使用時資料是必須的,那麼請考慮給響應的資料乙個預設值~~,typescript中也可以使用?來判斷是否存在值()
如果資料過多可以考慮封裝乙個工具類,配合mapstate使用~~~
另外,webpack的require居然會把指定目錄下所有檔案跑一遍,乙個圖示包一萬多個檔案,熱更新居然要等半分鐘!!!
還是vite好用!!強烈推薦
vue 請求資料
vue 原本有乙個官方推薦的 ajax 外掛程式 vue resource 但是自從 vue 更新到 2.0 之後，官方就不再更新 vue resource。目前主流的 vue 專案，都選擇 axios 來完成 ajax 請求，而大型專案都會使用 vuex 來管理資料，此處主要講解使用axios獲取...
使用load 方法非同步請求資料
使用load 方法通過ajax請求載入伺服器中的資料，並把返回的資料放置到指定的元素中，它的呼叫格式為 load url,data callback 引數url為載入伺服器位址，可選項data引數為請求時傳送的資料，callback引數為資料請求成功後，執行的 函式。例如，點選 載入 按鈕時，向伺服...
封裝axios請求方法，Vue請求資料
npm install axios s axios內建了promise模組 const axios require axios axios.get user?id 12345 then function response catch function error finally function 傳...