基于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开发应用的时候,应该谨慎而正确的选择,在哪种情况下应该使用哪种状态管理。

————————————————

原文地址:https://www.cnblogs.com/dillonmei/p/12578664.html

时间: 2024-10-11 10:07:22

基于vue前端状态管理模式的相关文章

理解Vue的状态管理模式Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大上,蛮吓人的.在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用.这么说吧,将vue想作是一个js文件.组件是函数,那么vuex就是一个全局变量,只是这个"全局变量"包含了一些特定的规则而已. 在vue的组件化开发中,经常会遇到需要将

Vue Admin - 基于 Vue & Bulma 后台管理面板

Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组件,其中还有丰富的图表组件,开箱即用.赶紧来体验一下吧. 在线演示      免费下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[

Vue中状态管理——Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

Vuex----vue的状态管理模式

Vuex----vue的状态管理模式 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,Vuex 是繁琐冗余的,一般用于大型项目. 官方文档 https://vuex.vuejs.org/zh/guide/state.html 安装 进入到项目目录里面 cnpm in

4-Vue中的状态管理模式

安装 npm install vuex --save 在自定义文件夹中的index.js中书写内容 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { user: { } }, mutations: { login (state,user) { state.user=user; } } }) 如 将其注入到vue中 存入 取出 computed: 

Vuex-一个专为 Vue.js 应用程序开发的状态管理模式

为什么会出现Vuex 非父子关系的组件如何进行通信?(Event Bus)bus.js import Vue from 'vue'; export default new Vue(); foo.vue import bus from './bus.js'; export default { methods: { changeBroData() { bus.$emit('changeBarData'); } } } bar.vue import bus from './bus.js'; expor

Vuex内容解析和vue cli项目中使用状态管理模式Vuex

中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, acti

Vuex,状态管理模式

对于 Vue 本人目前接触不深,只得浅层分析,Vue 是单向数据流, state,驱动应用的数据源: view,以声明方式将 state 映射到视图: actions,响应在 view 上的用户输入导致的状态变化. 子组件内部不能直接修改从父级传递过来的数据,子组件与子组件之间无法相互传递数据.如果我们想让两个子组件之间进行通信的话,可以借助子组件 A 向父组件传值,父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信. 这就有一个尴尬的问题了,要是子组件 A 上面还有一层父组件,子

weex,bui-weex基于vue前端框架开发移动应用

weex 官方文档 bui-weex 官网地址 Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架. 在集成了 WeexSDK 之后,你可以使用 JavaScript 语言和前端开发经验来开发移动应用. BUI-Weex 是一套专门为Weex前端开发者打造的一套高质量UI框架.帮助开发者快速构建移动应用 原文地址:https://www.cnblogs.com/lk4525/p/11322975.html