vuex 插件之 数据持久化

原创 tianxiaofeng747 随笔 技术 232阅读 2018-07-31 22:30:32 举报

用vue 开发的时候我们一般会遇到某种情况,比如右上角动态显示购物车商品数量。
这时候可能遇到一个问题,就是我f5后,页面全部重新刷新,vuex 的store 丢了。这时候我想显示之前的数据,怎么办?
我们想到了用 localStorage保存数据,然后第一次加载的时候拿到数据渲染,
那么问题来了,我们如何保证vuex store的数据 和 localStorage 保存的数据是同步的呢?
这时候就要用到我们今天的主角vuex插件功能了。

官方解释

然后摸着石头找马,我们知道,它是一个函数,它的参数是store。
当store初始化的时候执行该函数,你可以直接这样写

意思就是拿到localStorage的值 判断不为空,利用store.replaceState赋值。
那当我们的store变化的时候 怎么同步到 localStorage ?
于是乎就想到了这样。

如果我们提交的数据是通过actions 异步提交的, vuex的 store 还提供一个实例方法subscribeAction。 用法和 subscribe 类似。
写完后,整个函数是这样的。

然后我们 应用它

看看效果。

闪屏的是我按了f5,完成了!
这个插件还存在一些问题:
比如,在vuex中 我想部分数据持久化怎么办?
我想用cookie存数据,或者本地数据库存储怎么办?
这里推荐一个github开源的插件vuex-persistedstate
它支持初始化一些参数,实现个性化需求。
完!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复