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