基于vue前端状态管理模式

时间:2022-08-26 08:27:21

本文仅介绍及区分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开发应用的时候,应该谨慎而正确的选择,在哪种情况下应该使用哪种状态管理。

相关文章