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:

 

 

 

 

 

 

完。