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(一) 的相关文章

  • 是否存在 IsCallable 为 false 但 IsConstructor 为 true 的 JS 对象?

    ECMAScript 规范函数可调用 https www ecma international org ecma 262 6 0 index html sec iscallable当且仅当其参数具有 Call 内部方法时返回 true 它在
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • Javascript Promise“then”始终运行,即使 Promise 未能执行

    我希望当调用第二个 then 时不执行第三个 then 但是 即使 Promise 被拒绝 调用第二个 then 并且代码返回 rejected 然后返回 undefined 它仍然调用第三个 then 如何不运行第三个 then 这样 未
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 将 CKEditor 5 与 nuxtjs 结合使用

    我正在尝试在我的 Nuxtjs 项目中导入 CKEditor 5 的自定义版本 并且我已经尝试了所有可能的方法来正确导入它 但没有一个对我有用 这是其中之一 let ClassicEditor let CKEditor if process
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 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