uniapp 使用全局狀態管理 Vuex 實現 “搜索歷史-數據持久化”


前言:

之前介紹過如何使用vuex,現在就是寫個筆記記一下如何用vuex 實現數據持久化:

數據持久化其實就是為了吧數據[搜索歷史]放在 本地緩存中即:setStorage,,,,本來數據就是放在vue search模塊下的 state中的,但是怕丟失什么的。。。

 

 

 

這里直接講解第二步:

1.在模塊中的 mutations 直接新建方法,然后把vux-state中的值保存到本地緩存中,但是

uniapp中,如果vueX在模塊內調用mutations中的函數,那么有下面的步驟:

【其中:state.searchData 是 頁面中搜索歷史存進來的 vux-state 數據。】

 

vueX在模塊內調用mutations中的函數:

 那么就會調用 search模塊【其實就是自己】,下面的 saveToStorage函數【數據持久化函數】,

 

 

記住啊 是在 vuex 模塊內才要這樣寫,頁面是直接 ... 的形式的,之前我也寫過 可以回去翻翻.

 

 

我們在 添加搜索歷史  和 刪除指定搜索歷史里面 持久化即可,以后讀取的時候 直接讀取 緩存中的值,  那么就不用和 vuex 的 state 打交道了 ,實現代碼分離。

 

 

 

 

最后一步 ,更改state中的 searchData:

 

 

 

 

 

 

完。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM