Vuex的数据持久化

大家好，欢迎来到小小熊猫博客园，我们又再次见面了，这次想与大家分享的知识是Vuex的数据持久化问题，我们都知道，在我们做项目的时候，尤其是做一些组件之间的传值，比较麻烦（个人认为），但是存到Vuex中一刷新就会消失，如果遇到此类问题的小伙伴不要着急，看小小熊猫博客园为你解惑。

首先 我们想要使用Vuex数据持久化的话必须下载一个插件  我把命令写在下方，有需要的小伙伴可以自行复制

npm i -S vuex-persistedstate --save

这个呢就是我们Vuex数据持久化的安装包命令。

下面我们等待安装成功之后打开我们的项目中的store文件夹，打开里面的js文件，如果有多个js文件的话，可以先用一个做Vuex的数据持久化，不瞎扯了，我们打开之后引入，代码我放在下面

import createPersistedState from 'vuex-persistedstate'

这行代码就是引入我们的Vuex数据持久化安装包中相关的一些东西，然后我们引入了之后最后在actions下面配置这么一行代码，就可以实现Vuex数据持久化了，上代码

 plugins:[createPersistedState()]

现在你的代码就可以对Vuex中的数据进行持久化显示了，当然Vuex的数据会存放到localStorage中，不妨自己试一试，提醒一下，使用Vuex进行组件传值就行，千万不要觉得有了Vuex的存储路由守卫或者是路由鉴权就可以使用Vuex数据了，我们使用路由守卫还有路由鉴权的时候还是需要我们自己动手进行存储localStorage的。

好了，今天的知识也分享完了，非常开心能够与大家分享知识，共同进步，共同学习，最后祝：看到本篇文章的伙伴技术越来越高超，money越来越多。也希望认同我的小伙伴可以动动发财的小手为我点个关注或者帮本篇文章点个赞，鄙人感激不尽。