Vuex从了解到实际运用,彻底搞懂什么是Vuex(一)

2023-11-03

什么是Vuex全局状态管理

一句话来说,Vuex全局状态管理是任意组件之间的通信的解决方案

Vuex实现原理

  • 借助于Vuex提供的单例,可供任意组件的调度
  • 它里面提供了一些对应的状态和方法,比如 state, getter, mutation, action, modules…

组件通信

为了帮助大家更好的去理解,下面举例几种组件通信的情况

多级组件通信

如下图:

在这里插入图片描述

1.组件App.vue想要给组件EmitterComponent.vue传值,那就需要使用Props进行属性传值,假如父组件给子组件传了data,子组件想要修改data的值,那就需要使用 $ emit自定义事件传值给父组件让其修改。简单来说就是“谁传值谁修改”
2.如果下面还有子组件,那从上往下传值需要一层一层的使用Props进行传值,从下往上也需要一层一层的使用 $ emit自定义事件传值。props和 $ emit自定义事件传值能满足大部分情况下的传值操作,但是有些情况会很麻烦

同级组件通信

如下图,只使用props和 $ emit 进行同级组件通信

在这里插入图片描述
1.下面两个组件想要进行通信的时候,就需要第一个组件先使用$ emit传值给父组件,再有父组件通过Prop传值给第二个组件。如果下面有很多层子组件的时候会非常的麻烦。、

使用Vuex进行组件通信

如下图,使用Vuex进行组件通信

在这里插入图片描述

1.谁想要data的值都能直接访问Vuex实现,并且谁修改了Vuex中data的值进行了修改,都会进行一个监听,用过这个data的组件都会进行更新

所以Vuex的一个核心意义总结来说:我们可以把很多组件需要用到的一个属性抽离出来放到Vuex中作为一个全局的属性可供任意组件使用。

在这里插入图片描述

关注我,后面会继续为大家介绍,组件如何从Vuex中获取,修改值的一系列操作

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuex从了解到实际运用,彻底搞懂什么是Vuex(一) 的相关文章

  • model.save() 返回无效输出

    我正在使用本文中的 Node js mongodb 和express 对 REST Api 进行简单测试 MERN 第一部分 使用 Node js 和 Express 构建 RESTful API https medium com week
  • 使用 Mongoose 在 JSLint 中抑制“需要一个标识符,而是看到“默认”(保留字)”

    我在用着jshint验证我的 JavaScript 文件 在服务器端 我使用 Node js 和 Mongoose 在 Mongoose 中 我被鼓励以如下方式编写模式 var UserSchema new mongoose Schema
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • jQuery show() 和 hide() 的更流畅替代方案

    我有一个带有隐藏列的页面设置 使用 jQuery show 和 hide 函数将列滑入和滑出 然而 它有点 笨重 并且在显示 隐藏时看起来不太流畅 相比之下 我还有一个使用 jquery UI 手风琴的页面部分 当在这些部分之间切换时 过渡
  • Google App Script postMessage 与收件人窗口的来源不匹配

    我有一个 Google App 脚本部署为Web应用程序 https developers google com apps script guides web 它工作正常 直到今天晚上我发现它无法在 Firefox 或 Chrome 中加载
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 如何使用Javascript获取ASP.NEt Web Forms标签的值?

    我有以下标签控件
  • 验证动态添加的输入字段

    我用过this http docs jquery com Plugins Validation以下表单的 jquery 验证插件
  • 当用户输入/删除时,使文本字段中的提示消失/重新出现[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁知道我怎样才能在我的搜索栏中做出
  • 扩展html表格突出显示行和列并使当前单元格具有不同的颜色

    我找到了用鼠标悬停时突出显示行和列的示例 https stackoverflow com a 28312853 139698 https stackoverflow com a 28312853 139698 如何使鼠标悬停的一个单元格变为
  • 特别更改画布上的笔画不透明度,但不更改颜色

    我有一个漂亮整洁的脚本 可以循环显示颜色 并且与 xxxxxx格式 但我想改变透明度 有没有办法做到这一点 我指的是ctx strokeStyle 这是当前的代码 canvas strokeStyle 16777215 s length i
  • 在Vue.js 3中添加全局变量

    如何在 Vue js 3 中添加全局变量 在 Vue js 2 中 我们在main js file Vue prototype myGlobalVariable globalVariable 最直接的替换就是app config globa
  • 处理照片上传的最佳方式是什么?

    我正在为一个家庭成员的婚礼制作一个网站 他们要求的一个功能是一个照片部分 所有客人都可以在婚礼结束后前往并上传他们的照片 我说这是一个很棒的想法 然后我就去实现它 那么只有一个问题 物流 上传速度很慢 现代相机拍摄的照片很大 2 5 兆 我
  • javascript 函数后面括号中的值

    我正在尝试重新利用我在 SO 的答案中找到的一些 Javascript 代码 但我想首先更好地理解它的语法 其大纲是 function root ns factory some code window detectZoom function
  • 如何应对 WebStorm 中大量未解决的变量警告?

    我有一个从服务器获取数据的函数 function getData data console log data someVar 网络风暴说someVar是一个未解决的变量 我怎样才能摆脱这样的警告 我看到几个选项 禁止 IDE 设置中的警告
  • 将base64图像转换为Node Js中的文件

    我是 Node Js 新手 我需要包含用户的个人资料图片 我从 IOS 应用程序收到 Base64 图像的请求 我需要将其存储在 images 文件夹中并将图像路径保存在 mongodb 数据库中 我使用了以下代码 var bitmap n
  • 如何运行 Mike Bostock 的 D3 示例?

    我一直在尝试经营迈克博斯托克透视地球仪 http bl ocks org mbostock 6747043例如 但是如果您尝试在本地重现它 则对其 json 文件的引用是不正确的 问题来自于这行代码 d3 json mbostock raw
  • 如何在输入时格式化 contenteditable div?

    我正在尝试编写一个函数 允许 contenteditable div 在用户输入 div 时执行一些自动格式化 到目前为止我只能让它在 IE 中运行 有人可以帮助我吗 function formatOnKeyUp if window get
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • Linux基线检查与安全加固

    安全加固 Linux安全加固 账户管理 一 口令锁定策略 检查操作步骤 查看配置文件 more etc pam d password auth 查看是否存在如下内容 auth required pam tally2 so deny 5 on
  • SVM支持向量机的多输入单输出预测模型

    多输入单输出 使用SVM做预测的时候 涉及到数据处理 这里强调一下 其它预测算法也适用 我们经常将收集数据集进行归一化 标准化 其实 只需要对部分数据进行归一化即可 归一化的目的是将输入向量中的各属性之间的数量级拉近 如果量级相差过大会影响
  • Java经典面试解析:服务器卡顿、CPU飙升、接口负载剧增

    线上服务器CPU飙升 如何定位到Java代码 解决这个问题的关键是要找到Java代码的位置 下面分享一下排查思路 以CentOS为例 总结为4步 第1步 使用top命令找到占用CPU高的进程 第2步 使用ps mp命令找到进程下占用CPU高
  • ui设计移动端字体适配_手机端页面UI设计尺寸和字体大小规范

    UI设计师在初涉移动端设计和开发的时候 基本都会面临一个令人十分苦恼的问题那就是移动端页面UI设计尺寸标准和字体规范 今天奇酷学院整理了一些关于手机端页面UI设计尺寸和字体大小规范问题 希望对UI设计师设计移动端页面的时候有一些帮助 一 P
  • js实现框选截屏功能

    实现的思路大概就是 先将dom转化为canvas画布 再对canvas进行裁切 然后通过canvas api生成图片 这里用到了一个库html2canvas 效果如图 首先实现框选效果 const mousedownEvent e gt m
  • java 订单审核 加锁_日常小记:订单添加锁机制

    考虑情况 java是个多线程机制 多线程是一把双刃剑 一旦设计到多个线程操作共享资源的情况下 处理不好就会出现线程安全问题 线程安全性可能是非常复杂的 在沒有充足的同步情况下 多个线程执行顺序是不好操作的 同步和异步 同步就是一件事 一件事
  • 数据结构——栈和队列

    数据结构 栈和队列 数据结构 栈和队列 数据结构 栈和队列 1 栈 1 1 栈的概念及结构 1 2 栈的实现 2 队列 2 1 队列的概念及结构 2 2 队列的实现 1 栈 1 1 栈的概念及结构 栈 一种特殊的线性表 其只允许在固定的一端
  • ubuntu goland import 红色波浪线

    首先查看对应的环境变量GOPATH 一定要和goland的是同一个用户 使用命令如下 go env 然后打开goland的 setting 找到对应的GOPATH 如下 apply 然后 ok 即可 错误就没有了
  • sysdig_功能强大的系统工具Sysdig命令实例介绍

    Sysdig是一个能够让系统管理员和开发人员以前所未有方式洞察其系统行为的监控工具 我们可以用sysdig命令做很多很酷的事情 你如果有更有趣的用法 想添加到下面的命令例子中 请告诉我们 1 网络 查看占用网络带宽最多的进程 sysdig
  • R-squared 和 Adjusted R-squared联系与区别

    原文见 https discuss analyticsvidhya com t difference between r square and adjusted r square 264 8 下面是自己理解的总结 大概意思就是说 R squ
  • 【DateFormat】DateFormat用于实现日期的格式化

    DateFormat 创建实例 getDateInstance 返回一个日期格式器 getTimeInstance 返回一个时间格式器 getDateTimeInstance 返回一个日期时间格式器 上述方法均可传入参数指定日期样式和地区
  • 链表OJ练习(2)

    一 分割链表 题目介绍 思路 创建两个链表 ghead尾插大于x的节点 lhead尾插小于x的节点 先遍历链表 最后将ghead尾插到lhead后面 将大小链表链接 我们需要在创建两个链表指针 指向两个链表的头节点 用这两个指针标记lhea
  • c# 本机IP修改

    校园网总是要修改ip 去实验室也要修改ip 想着编一个IP修改的软件比较方便 我用的是 using System Management 报错的话记得在项目的引用中添加 右击 引用 添加引用 System Management private
  • 怎么把wsl1 变成wsl2

    Ensure the distribution runs in WSL 2 mode WSL can run distributions in both v1 or v2 mode To check the WSL mode run wsl
  • 宝塔安装,创建WordPress

    宝塔安装 1 进入宝塔官网 官网地址 https www bt cn new index html 2 安装Linux面板7 9 4 2 1选择 下载安装 这里我们在CentOS7 4上安装所以选择 Linux面板7 9 4 安装脚本 2
  • 清华镜像源下载pytorch及Torchvision

    conda config add channels https mirrors tuna tsinghua edu cn anaconda pkgs free conda config add channels https mirrors
  • 挖掘机铲斗关于是否用最小二乘法

    根源应该在连接杆P3P4那里 它绕P4的旋转 使得P5P3旋转 并产生一定位移 绕液压杆伸缩 同时 P3P1位移 或者旋转 或者先旋转一定角度再位移 此时P2P1运动 这里P2P1的值发生了变化 可能要拟合 铲斗再绕着P2P1的新向量旋转
  • 无人机rtmp推流直播解决方案

    无人机直播的需求 无人机直播是航拍的价值延伸 在无人机进行现场航拍 监控成为行业的基本需求后 将航拍视频实时回传到指挥大厅和业务平台进行远程观看和分析 将会带来更新颖的应用效果和价值 客户需要独立部署的流媒体服务器 尽管不少品牌的无人机可以
  • Pytorch快速入门系列---(三)pytorch中的数据操作和预处理

    目录 1 高维数组 1 1 回归数据准备 1 2 分类数据准备 2 图像数据 1 torchv
  • Vuex从了解到实际运用,彻底搞懂什么是Vuex(一)

    什么是Vuex全局状态管理 一句话来说 Vuex全局状态管理是任意组件之间的通信的解决方案 Vuex实现原理 借助于Vuex提供的单例 可供任意组件的调度 它里面提供了一些对应的状态和方法 比如 state getter mutation