vueX持久化存储插件

场景:我们在做vue项目时,会遇到存储一些公共值,这样方便在不同的页面去调用这些值

        vue中有个vuex,一般我们都存储在这里,这样在每个页面都能够调用

                但是,当页面刷新了,这些值就被自动清理掉了

                这时候我们就想到存储在本地,比如:localStorage

                        localStorage:一个在浏览器存储体积大,时间更持久的数据存储优点

                        这样貌似解决了页面刷新数据丢失的囧像

                        但是,一个项目中,肯定会存储很多公共值,我们不可能有一个存一个写

                        一个,这样太麻烦了,浪费时间
                       

下来就带来一个可以让你不用手动去写,当你每次在vueX中存储值的时候,自动在本地给你存储对应的值

这个插件就是:vuex-persistedstate

全局安装:

        

npm install vuex-persistedstate --save

安装指定版本:

yarn add vuex-persistedstate@3.2.1

安装完成后,在state中导入该插件

(我的路径是在store/index.js中导入)

import createPersistedState from 'vuex-persistedstate'

这样就完成了,试试更改vueX的值,看是不是自动在本地存储相应的数据

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值