场景:我们在做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的值,看是不是自动在本地存储相应的数据