有localstorage，为什么还要用vuex

刚开始接触vuex时，我就一直有个疑问，有localstorage，为什么还要用vuex。既然是都是需要共享数据源，那localstorage和sessionstorage显然操作起来更方便，那vuex存在的意义是啥呢？在实际开发之后，业务需求和对响应式的理解回答了我这个问题。

vuex存储与本地储存的区别

1、区别：

• vuex存储在内存
• localstorage（本地存储）则以文件的方式存储在本地，永久保存（不主动删除，则一直存在）
• sessionstorage( 会话存储 )，临时保存

localStorage 和 sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的 stringify 和 parse 来处理。

2、应用场景：

vuex用于组件之间的传值
localstorage，sessionstorage主要用于不同页面之间的传值

3、永久性：

当刷新页面（强刷,属于清除内存，导致store初始化）时vuex存储的值会丢失(这也导致了vuex也不是十全十美的，强刷之后如果还要保留之前的数据就得需要配合localstorage或者sessionstorage使用，后面会讲到)
sessionstorage页面关闭后就清除掉了，localstorage不会，但有个注意点就是只能保存string类型的值，可数据转化JSON或者按规律存字符串

4、响应&监听：

注：大家可能觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，理由如下：

第一：

Vuex就是对数据进行管理，对每一次数据变化进行跟踪
localstorage，sessionstorage只是存与取

第二：

如果非要进行比较的话，对于不变的数据确实可以两者确实能代替，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，而vuex把...mapState()放到computed中就可以实现。

虽然也可以用window.onstorage监听，但按照这个思路不断写下去，你会发现自己撸出了一个状态管理器来。说到底，一个是数据容器，一个是数据管理器。所以二者的目的不同，不能简单说谁能代替谁。

假如ab两个组件都在用本地存储，你改变了a组件里的数据，a页面数据虽然会同步到本地存储，但是由于数据不是响应式的，所以b页面的数据不会变，除非每一个用到响应式的地方onstorage监听改变数据。

总结：

总的来说，vuex是为了用来响应，而本地存储的数据不是响应式的！！！

参考链接：https://juejin.cn/post/7096003583354601479