基于vue前端状态管理模式

本文仅介绍及区分localstorage、vuex以及vue的全局变量、组件。

一、localstorage简介

        localStorage、sessionStorage以及cookie都是在浏览器用来存储数据的，只是作用于浏览器，不会存在与服务器交互的情况。sessionStorage只在当前的域名中有效，重新打开一个新窗口就会重新创建一个sessionStorage对象。而localstorage会一直存在，直到我们手动清除浏览器数据，否则会一直存在浏览器中。

二、vuex简介

        vuex是专门为vue.js开发的状态管理模式。采用集中式存储管理应用中所有组件的状态，并以响应的规则保证状态以一种可预测的方式发生变化。vuex有5个核心概念，分别为state、getter、mutation、action、module。这五个核心概念都围绕着一个核心，就是store(仓库)，将组件的共享状态抽取出来，存到仓库中，以一个单例模式管理，任何一个组件都可以获取到管理的数据或者触发管理的状态。

        vuex中一个store(仓库)包括了行为(actions)、突变(mutations)、状态(state)，完成的vuex的一个流程为：一个组件(components)中的一个方法调用(dispatch)了actions，随后actions提交(commit)了对应的mutations，随后mutations操作了state中的状态数据，当状态改变的时候，组件就会重新渲染，实现了即时的局部更新。

        我们在遇到多个组件共享状态，多个视图依赖于同一个状态，不同视图的行为需要改变同一个状态的时候，我们就可以用vuex来解决这些问题。

三、vuex和localstorage区别

        1、从名称上看，vuex称为状态管理，重点为管理，而localstorage重点为存储。是完全不同的两个概念，vuex存的是状态，表示与view对应的数据，存在内存中，而localstorage是浏览器提供的接口存文件等，存在磁盘中或者本地。这也是他们之间最大的区别。

        2、vuex和localstorage存活周期也不同，localstorage只要用户不手动清空，那么会一直在本地永久的保存下去，而vuex，关闭页面的时候。

        3、vuex的核心是store，其的存储状态是响应式的，当vue组件从store中读取状态的时候，如果store中的状态发生改变，那么相应的组件也会得到相应的局部高效更新，这点是localstorage做不到的。

        4、vuex的store中的状态我们是不可以直接改变的，唯一改变他的方法就是提交(commit)mutation，这样我们可以跟踪查看到每一次的数据状态的变化，而localstorage不能检测到变化只能帮我们存储。

     

四、vuex和vue全局变量、组件的区别

1、简介vue全局变量

     全局变量指定义一个变量，在vue所有实例中都可以使用。举一个最简单的例子，在我们vue项目中需要使用axios请求的时候，我们需要定义一个baseURL，如果我们在每个页面请求的时候都写一次地址，万一服务器的地址改变了，那么就需要每一个页面都要去改，会非常麻烦而且容易出错，所以定义一个总的baseURL，在需要改变的时候，只需改变一次就好了，而且也不会出错。

2、简介vue全局组件

       组件是vue.js最强大的功能之一，它可以扩展html元素，封装可重用的代码，是一个可以自定义的元素，注册了一个全局组件后，在所有的vue实例中都可以使用。例如我们需要做一个公司的网页，那么不管我们点进哪个链接，页面的上方都会显示公司的名称、logo等，页面最下方都会显示公司地址、联系方式等，那么我们可以定义一个layout的全局组件，这样我们就不用每一个页面都要去写一次了，不仅方便了很多也减少了很多代码。

3、vuex和全局变量、组件的区别

     全局变量只能在定义以后，在所有引用它的实例中，都显示为这个变量的值，无法实时更新，只有开发者改写代码的时候才能改变，而vuex的状态管理可以利用某个方法就改变其中管理的数据，以达到实时更新。

     全局组件可以传参数，但是vue的文档中也有介绍说到：传参的方法在兄弟组件间的传递是无能为力的，只能通过父级组件直接引用或者通过事件来变更和同步状态，这样是非常容易出错的，所以我们可以利用vuex来解决组件之间的通信问题。

综上，在基于vue开发应用的时候，应该谨慎而正确的选择，在哪种情况下应该使用哪种状态管理。