Vue组件传值存在的弊端-Vuex状态管理
以下内容纯属个人理解,旨在记录和分享。
导入
使用Vue组件传值,可以实现父子组件之间的数据交换。但实际上,在应用过程中仍然存在很多不便之处:
- 当存在多层组件嵌套时,组件之间的传值将会变得极度麻烦和繁琐。从最底层的子组件传值至最上层的父组件(或者反过来)可能会跨越好几层组件。
- 不同组件之间传值可能存在相同的情况。同一个状态变量在多个不同的组件之间都在进行传递,这就造成整个过程的冗余性。并且更重要的是所有人都在对这个“状态变量”进行更改,极易造成状态的混乱。
那么,能不能将这些层层传递的、多组件共享的“状态变量”提取出来进行统一管理,使得整个过程变得简单清晰明了,于是Vuex的应用被提出。
Vuex是什么
官方解释:
“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。”
个人理解:
如上面加粗部分,状态可以单一的理解为组件的值、数据,当这些组件的值、数据发生变化时,组件的状态跟随发生变化。我们将这些“状态”提取出来,进行集中存储,并以指定的方式管理(如官网的State、Getter、Mutation等)。从而使得整个值传递过程清晰明了,让状态的变化以一种可控的方式进行,即所谓的“可预测”。
这就是Vuex做干的事。
什么是“状态管理模式”?
借助于官网,加深我们对于 “为什么要推出Vuex” 的理解。
组件状态自管理大致可分为如下三个组成部分(也如上图所示):
- 状态,驱动应用的数据源;
- 视图,以声明方式将状态映射到视图;
- 操作,响应在视图上的用户输入导致的状态变化。
以上三点共同组成单向数据流的概念:数据状态(state)渲染视图(view),视图承载事件(actions),事件驱动状态改变。
但是,在多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
“对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。”
总结
于是,将组件的共享状态抽取出来,以全局单例模式进行统一管理,并规定组件只能以指定的方式才能修改这些状态,即是Vuex。
Vue组件传值存在的弊端-Vuex状态管理相关推荐
- vue从入门到进阶:Vuex状态管理(十)
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...
- vue组件传值方式有哪些
Vue 作为一个轻量级的前端框架,核心两大特性就是响应式编程和组件化. 本文针对组件之间传值做详细讲解. Vue就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是 ...
- vue组件传值的十种方式
vue组件传值的十种方式 一.props 父传子 子组件 // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: ...
- 【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件 ...
- Vue项目 成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
- vue组件传值的11种方式
不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件 在子组件里定义一个props,即props:['ms ...
- 在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具 一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
- vue组件传值 prop传递对象
vue组件传值 prop传递对象 大家经常会使用组件传值,今天我用到的时候突然遇到了一些坑,想着今天来记录一下,大家做一个参考,此篇仅说一下prop传递对象. 子组件接收基本的数据类型 子组件 < ...
- 41. Vue组件传值-父组件向子组件传值
前言 前面写了组件的创建.切换等等篇章,主要讲述了组件自身如何在父组件app中如何渲染使用.这里存在一个问题,就是父组件的数据如何传递到子组件中. 这是一个很常见的情况,如果是jQuery那么都是直接 ...
最新文章
- mysqlorderby数字字符串排序_Python中的元组排序和深度比较
- 图解ElasticSearch 搜索原理
- Python中使用librosa包进行mfcc特征参数提取
- 无风扇网站服务器,这款服务器采用无风扇设计
- 3班的第一次模拟面试
- apache mahout_Apache Mahout:入门
- c语言中将整数转换成字符串_在C语言中将ASCII字符串(char [])转换为十六进制字符串(char [])...
- canvas笔记-使用canvas画圆及点阵的使用
- DNS(BIND) 正向解析 反向解析 基本服务的搭建
- NGINX内部:我们如何设计性能和规模
- 取消链接文件失败。 我应该再试一次吗?
- 乘法分配律逆运算是什么意思_聚类,我们先操弄一下Kmeans,看看什么是非监督学习...
- python-合并两个txt文件
- 计算机主机装机注意,自己组装电脑要注意什么?DIY老司机教你装机注意事项 (全文)...
- 小程序云开发实战:从零搭建科技爱好者周刊小程序
- 利用FME对坐标文件进行坐标转换
- 日本要把123万吨核污水排入太平洋,核威胁距离我们有多远?
- VA虚拟应用匠心独妙,细节的精彩
- Note For Linux By Jes(7)-学习 shell scripts
- ROS统计在线用户数脚本