如何DIY一个Vuex持久化插件，实现长尾词功能？

本文共计1039个文字，预计阅读时间需要5分钟。

在处理Vue相关项目时，经常会遇到页面刷新导致Store内容丢失的问题。复杂的项目中，每个细节和大量状态都需要处理，防止因一次刷新就丢失数据，需要谨慎处理。

在做Vue相干项目的时刻，总会碰到由于页面革新致使Store内容丧失的状况。庞杂的项目每每触及大批的状况须要治理，假如仅由于一次革新就须要悉数从新猎取，价值也难免太大了。那末我们能

在做 Vue 相干项目的时刻，总会碰到由于页面革新致使 Store 内容丧失的状况。庞杂的项目每每触及大批的状况须要治理，假如仅由于一次革新就须要悉数从新猎取，价值也难免太大了。

那末我们能不能对这些状况举行当地的耐久化呢？答案是可以的，社区里也供应了不少的解决方案，如 vuex-persistedstate，vuex-localstorage 等插件，这些插件都供应了相对完美的功用。固然除了直接运用第三方插件之外，我们本身来 DIY 一个也是异常轻易的。

这个耐久化插件主要有2个功用：

可以挑选须要被耐久化的数据。

可以从当地读取耐久化数据并更新至 Store。

接下来我们会从上述两个功用点动身，完成一个 Vuex 耐久化插件。

Gist地点： gist.github.com/jrain

在线体验地点： codepen.io/jrainlau/p

一、进修写一个 Vuex 插件

援用 Vuex 官网 的例子：

Vuex 的 store 吸收 plugins 选项，这个选项暴露出每次 mutation 的钩子。