vue学习之------vuex通俗易懂篇（四）

vuex与localStorage的异同是什么？

（1）刷新页面时

vuex：由于vuex中的数据是存储在运行内存中的，所以刷新页面，会重新加载vue实例，vuex中的数据会初始化，导致数据丢失。

localStorage：localStorage中的数据是永久性存储的，即使浏览器关闭，数据也不会被删除。

【类比：sessionStorage中的数据会在浏览器关闭时自动删除】

（2）响应式

vuex：vuex中的数据是响应式的，一旦某组件中的数据更新，其他组件中的数据也会同步更新。

localStorage：不是响应式的。

（3）存储数据的位置

vuex：vuex中的数据存储在运行内存中。

localStorage：localStorage中的数据存储在磁盘中。

【从内存中读取数据的速度是远高于磁盘的，所以使用vuex能提升性能和用户体验。】

vuex和localStorage怎么配合使用？

vuex可以保证响应式的效果，运行速度快，存储数据多少不会影响速度；localStorage保证数据一直在。

例子：把token同时存储在localStorage和vuex中。

（1）登陆

第一次登陆，把token存储在localStorage和vuex中；

第二次登陆时，可以从localStorage中读取登陆状态，自动登陆，并且需要把状态再次同步到vuex中，以供其余页面功能使用。

（2）刷新页面

如果用户刷新了页面，又能从localStorage中恢复数据，并同步到vuex中。

（3）退出登陆

如果退出登陆，则会清空token，vuex的响应式特点会同步更新token的值，其余页面功能和权限也会同步更新。