vue 数据持久化,vuex持久化存储原理

　　Vuex数据的持久化可以很好的解决全局状态管理，数据刷新后会消失，这是我们不愿意看到的。本文主要介绍了关于Vuex数据持久化的思想和代码。有需要的朋友可以参考一下。

什么是vuex

　　Vuex:是专门为vue.js开发的状态管理器，采用集中存储所有组件状态。

　　五个属性：状态、获取器、突变、动作、模块

　　基本用途：

　　创建一个新的store.js文件，最后引入main.js，挂载到实列上。

　　从“vue”导入Vue

　　从“vuex”导入Vuex

　　Vue.use(Vuex)

　　常量状态={}

　　const getters={}

　　常量突变={}

　　常量操作={}

　　导出默认的新Vuex。商店({

　　状态，

　　吸气剂，

　　突变，

　　行动

　　})

　　State属性：存储状态，例如要存储的数据。

　　Getters:类似于共享属性，您可以通过这个获取存储在状态中的数据。$store.getters

　　突变：唯一可以改变的状态是提交突变。$store.commit()

　　动作：一步突变，可以通过dispatch分发来改变状态。

Vuex 数据持久化

　　众所周知，Vuex的数据是存储在内存中的，刷新网页就会丢失。然而，我们想要刷新的一些数据仍然可以保留，所以我们需要存储这些数据。为了便于记录，使用localStorage将数据保存在Vuex中。

　　实现思路

　　因为理论上状态中的数据只能通过突变来更新，所以可以对突变事件进行监控，每个事件执行后，此时整个状态的数据都会转换成一个字符串，存储在localStorage中。

　　当页面初始化状态时，读取localStorage值，再次将其转换为JSON，并将其合并到当前状态。

　　这个方法只是一个简单的实现，并且只适用于简单的对象。对于复杂对象，转换成JSON可能会丢失相应的事件和方法，所以可以考虑以后用其他方式存储。

　　代码

　　插件：

　　导出默认值(options={})={

　　const storage=options . storage (window window . local storage)；

　　const key=options.key vuex

　　//获取状态的值

　　const getState=(key，storage)={

　　const value=storage . getitem(key)；

　　尝试{

　　返回值的类型！==未定义？JSON.parse(value):未定义；

　　} catch (err) {

　　console . warn(err)；

　　}

　　返回未定义的；

　　};

　　//设置状态的值

　　const setState=(key，State，storage)=1

　　storage.setItem(key，JSON . stringify(state))；

　　退货(商店)={

　　//初始化时获取数据，如果有，替换vuex的原始状态。

　　const data=object . assign(store . state，getState(key，storage))；

　　if(数据){

　　store.replaceState(数据)；

　　}

　　//订阅店铺的突变。处理程序将在每个变异完成后被调用，接收变异和变异后的状态作为参数。

　　store.subscribe((突变，状态)={

　　setState(键、状态、存储)；

　　});

　　};

　　};

　　呼叫方法：

　　从“@/plugins/VuexPersist”导入VuexPersist；

　　导出默认的createStore({

　　插件：[VuexPersist()]，

　　});

总结

　　关于Vuex数据持久化实现的这篇文章到此为止。有关Vuex数据持久性的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。