vueX持久化存储插件_学习

vueX持久化存储插件

创始人

2024-03-20 07:05:15

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

下一篇：封装MybatisUtils解决线程安全与事务问题

vueX持久化存储插件

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

（我的路径是在store/index.js中导入）

相关内容

热门资讯