前言:
之前介紹過如何使用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:
完。