VueX和localstorage的区别、VueX的应用场景
区别：
vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
永久性：
当刷新页面（这里的刷新页面指的是 --> F5刷新,属于清除内存了）时vuex存储的值会丢失，sessionstorage页面关闭后就清除掉了，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到，原因就是区别1。
VueX的应用场景
1、组件会被销毁
我们可以假设这样一个场景：
假如有这样一个组件，他是弹窗，有一些复选框和输入框，用户会选择和填写信息；
然后这个弹窗会被关闭和打开，由于业务需要，这个弹窗输入的内容，希望关闭后可以保留，在重新打开后，内容依然存在。
解决方案：
我们可以考虑将值存在父组件中，也就是说，实际修改的是父组件的值； 存在比如 sessionStorage、cookies之类的里面，在 created 时从中读取，destroyed的时候写入其中； 可以存到 global-event-bus 里面；
最好的还是存在 Vuex 里：
可以直接通过 $store.state 来调用，通过 commit() 来修改值；
也可以在 created 的时候，读取存在 state 里面的值，在 destroyed 的时候，写回 state；
2、组件基于数据而创建
我们可以假设这样一个场景：
用户登录后，读取权限配置表，这显然是一个异步操作； 这个配置表可能会影响很多页面。比如被影响的组件的加载条件，例如是 v-if="$store.state.userInfo.superVIP；
那么：
因为读取权限配置表这个异步操作，可能影响多个组件，而这些组件之间的关系，显然是不可预料的（即不一定是在同一个父组件下面）；
那么这个异步操作，写在某一个组件里就不太合适（因为其他组件读取这个组件很不方便，即使他是根组件）；
解决办法：
一个妥协的解决办法，是写在 global-event-bus 里面来实现； 但是显然，更好的解决办法是写在 vuex 里面更专业一些；
3、多对多事件——多处触发，影响多处
我们可以假设这样一个场景：
假如有一个事件，比如：切换页面显示风格，他将改变某一个变量的值； 当该变量为 true 时，那么页面风格为白天（主要影响 v-bind:style 的值）； 当该变量为 false 时，那么页面风格为晚上（同上）； 在多个地方可以切换这个页面风格开关； 毫无疑问，这个变量将影响多个地方的 v-bind:style 的值； 这就是 多对多 场景；
那么：
无论这个变量放在哪个组件里，其他组件调用他都是很麻烦的事情； 即使存于根组件，然后通过 this.$root.xx 来获取这个变量，也是很麻烦的，而且很丑陋；
解决办法：
如果不使用 Vuex，那么我们可能会去考虑使用 global-event-bus 来存储这个变量，并使用它； 这不是不可以，但不优雅，而且管理麻烦； 而使用 Vuex，那么这就是一件很方便的事情了； 我们可以通过 $store.state.xxx 来获取这个变量的值； 通过 $store.getters.yyy 来获取某些基于这个值的，表示通用样式（例如黑底白字）的对象； 通过 $store.commit() 来提交修改（比如在某些情况下可以禁止修改）； 甚至可以通过 $store.dispatch() 来获取其他风格的样式，并通过 $store.state 和 $store.getters 来返回新风格的样式；
4、总结
总而言之，假如你需要 数据 和 组件 分离，分别处理，那么使用 Vuex 是非常合适的。
相反，如果不需要分离处理，那么不使用 Vuex 也没关系。
比如某个数据只跟某组件打交道，是强耦合的。那么这个数据就应该存放在该组件的 data 属性中。
