vuex为什么要存在？它与浏览器缓存的区别？

vuex为什么要存在？它与浏览器缓存的区别？
面试被怼得哑口无言的题之一
我只能反复讲着vuex能干嘛。。语言苍白无力555~

加粗样式
文章思路（回答思路）按 vuex和浏览器存储介绍 => 共同点 => vuex解决了浏览器存储什么问题 => 浏览器自己的优势 => 总结

Vuex和浏览器存储

Vuex：

1. Vuex是vue的生态系统提供的一个插件，用来进行数据的状态管理，也就是集中管理项目公共数据

浏览器存储：

1. 包含了三种存储模式 cookie、localStorage、sessionStorage
2. cookie是由服务器端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的
3. SessionStorage、 LocalStorage都是由前端写入的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。

共同点

• 二者都可以对数据进行存储，也可以方便使用和操作全局数据
• 特别是当需要存储的数据在关闭页面时都需要进行销毁，采用vuex或者sessionStorage似乎都可以得到一样的目的

vuex解决了浏览器存储什么问题

1. vuex可以监听数据的变化。当vuex数值发生变化时，其他组件处可以响应式地监听到该数据的变化，当数据改变时，项目中引用到该数据（并且正在监听的）的地方都会发生改变
2. 可以存储任意形式的数据。浏览器存储中，数据只能以字符串的形式传入，对于不是string格式的数据需要采用JSON.parse()和JSON.stringify()去读写
3. 可以进行模块化存储。使用moudle模块化开发，可以对存储数据进行归类，避免存储内容过于臃肿
4. 没有数据存储大小限制。vuex是存储在内存中的，而storage存储在本地中，有一定的存储大小限制（cookie 4K，localStorage、sessionStorage 5M）存储内容过多会消耗内存空间，导致页面变卡。
5. 暂时没想到了

浏览器自己的优势：

1. 灵活控制存储数据时长。vuex是一旦关闭网页就失去数据的存储的，但是如果想要让数据长久的/关闭网页不被清空时，使用localStorage可以达到效果。

总结：

vuex的出现，确实为公共数据的管理带来了极大的方便。较为突出的便是它的数据监听响应，这是浏览器没办法去实现的一个功能。
但是浏览器存储也有自己的优点，在进行数据存储时，首先思考数据对于项目的一个意义，来决定存储的方式。
比如说token的存储，并不希望在页面关闭时就清空，此时采用浏览器存储更为合适。
可能还有一些其他的用法，有选择的将vuex和浏览器存储起来
比如可以用于在刷新页面vuex数据初始化的问题，因为在页面刷新的时候vuex会重新加载数据会初始化，可以在设置vuex的同时设置storage当刷新页面时如果vuex被初始化拿不到数据时可以使用缓存中记录的数据

参考：
https://www.codeleading.com/article/8950325214/
https://www.jianshu.com/p/5bda2dd07f16