六、Vuex

六、Vuex

6.1 Vuex是什么

  • 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信。
  • Github 地址: https://github.com/vuejs/vuex

6.1.2 什么时候使用 Vue

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

6.1.3 案例

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.1.4 Vuex 工作原理图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.2 vuex 核心概念和 API

6.2.1 state

  1. vuex 管理的状态对象

  2. 它应该是唯一的

  3. 示例代码:

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.2.3 action

  1. 值为一个对象,包含多个响应用户动作的回调函数

  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新 state

  3. 如何触发 actions 中的回调?

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  4. 可以包含异步代码(定时器, ajax 等等

  5. 示例代码:

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.2.3 mutations

  1. 值是一个对象,包含多个直接更新 state 的方

  2. .谁能调用 mutations 中的方法?如何调用

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  3. mutations 中方法的特点:不能写异步代码、只能单纯的操作 stat

  4. 示例代码:

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6.3 四个map方法的使用

6.3.1 mapState方法

  • 用于帮我们映射state中的数据为计算属性。
 computed:{//借助mapState生成计算属性,从state中读取数据。(对象写法)...mapState({sum:'sum',school:'school',student:'student'}),//借助mapState生成计算属性,从state中读取数据。(数组写法)...mapState(["school","sum","student"]),}

6.3.2 mapGetters方法

  • 用于帮助我们映射getters中的数据为计算属性
 computed:{//借助mapGetters生成计算属性,从state中读取数据。(对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性,从state中读取数据。(数组写法)...mapGetters(["bigSum"])}

6.3.3 mapActions方法

  • 用于帮助我们生成与 actions 对话的方法,即包含$store.dispatch(xxx) 的函数
methods:{//借助mapActions生成对应的方法,方法中会调用 dispatch 去联系 actions (对象写法)...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}),//借助mapActions生成对应的方法,方法中会调用 dispatch 去联系 actions (数组写法)...mapActions(['incrementOdd','incrementWait'])},

6.3.4 mapMutations方法

  • 用于帮助我们生成与mutations对话的方法,即:包含$.store.commit(xxx)的函数
methods:{//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)...mapMutations({decrement:'DECREMENT',increment:'INCREMENT'}),//借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)...mapMutations(['DECREMENT','INCREMENT']),},

mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件参数

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/701317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3获取环境变量import.meta.env

vitevue的时候环境变量的获取方式变成如下: console.log(import.meta.env)

ARMv8-AArch64 的异常处理模型详解之异常向量表vector tables

目录 一,AArch64 异常向量表 二,栈指针以及SP寄存器的选择 三,从异常返回 一,AArch64 异常向量表 异常向量表(vector tables)是一组存放于普通内存(normal memory)空间的&#xf…

【机器学习科学库】全md文档笔记:Jupyter Notebook和Matplotlib使用(已分享,附代码)

本系列文章md笔记(已分享)主要讨论人工智能相关知识。主要内容包括,了解机器学习定义以及应用场景,掌握机器学习基础环境的安装和使用,掌握利用常用的科学计算库对数据进行展示、分析,学会使用jupyter note…

vue从flask获取数据并显示

记录一个前后端分离遇到的问题,即vue前端从flask后端获取数据。具体描述如下:flask只负责连接数据库并获取数据库的数据,并返回给前端vue;vue则需要获取后端返回的数据并显示。 方法如下,分别用一个vue组件和一个flas…

【网站项目】488服装店销售管理系统

🙊作者简介:拥有多年开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板&#xff…

迷你世界之建筑生成球体

local x0,y0,z00,30,0--起点坐标 local dx,dy,dz60,60,60--外切长方体横纵竖长度 local count,all0,dx*dy*dz--计数,总数 local m,k10000,0--单次生成方块数,无用循环值 local x,y,z0,0,0--当前坐标 local demath.random(2,19)/2 local id600--方块…

中兴通讯携吉林移动迈向5G-A新阶段,完成3CC技术应用

日前,中兴通讯携手中国移动吉林移动分公司,在5G-A领域取得新突破。具体来说,双方基于MTK芯片M80终端,完成了5G-A三载波聚合试点,实测下行速率达到理论峰值4.25Gbps,相比2.6G单载波速率提升2.5倍。如此成绩&…

C++面试题精选与解析

C面试题精选与解析 一、基础与语法 请问C中的指针和引用有什么区别? 指针是一个变量,存储的是另一个变量的内存地址。指针可以被重新赋值以指向另一个不同的对象。而引用是某个变量的别名,一旦引用被初始化为一个变量,就不能改变…

LLM权重量化

LLM权重量化 浮点表示的背景知识Nave 8位量化使用LLM.int8() 进行8位量化结论References 大型语言模型(llm)以其广泛的计算需求而闻名。通常,模型的大小是通过将**参数的数量(大小)乘以这些值的精度(数据类型)**来计算的。为了节省内存,可以通过称为量化…

cmake 项目。qt5升级 qt6 报错 error: “Qt requires a C++17 compiler 已解决

日常项目开发中。需要对qt5升级到qt6 做cmake兼容配置,在编译中发现,有c 编译环境 报错 2>C:\Qt\6.5.3\msvc2019_64\include\QtCore/qcompilerdetection.h(1226,1): fatal error C1189: #error: "Qt requires a C17 compiler, and a suitable …

了解 JavaScript 中的重放攻击和复现攻击

在网络安全领域,重放攻击(Replay Attack)和复现攻击(Playback Attack)是一些可能导致安全漏洞的攻击形式。这两种攻击类型涉及在通信过程中再次发送已经捕获的数据,以达到欺骗系统的目的。本文将介绍 JavaS…

企业微信怎么变更企业名称?

企业微信变更主体有什么作用?现在很多公司都用企业微信来加客户,有时候辛辛苦苦积累了很多客户,但是公司却因为各种各样的原因需要注销,那么就需要通过企业微信变更主体的方法,把企业微信绑定的公司更改为最新的。企业…

Qt Android sdk配置报错解决

使用的jdk8总是失败,报错command tools run以及platform sdk等问题。后来主要是设置jdk版本为17,就配置生效了。Android sdk路径可以选用Android Studio自带的,但是也要在Qt中点击“设置SDK”按钮做必要的下载更新等。 编译器这里会自动检测到…

linux中的权限

Linux 的权限 在了解Linux的权限之前,我们需要知道Linux的构成,Linux分为三个部分,内核、外部程序、以及用户。 内核: 内核一般是指Linux的操作系统,用来执行用户发送的指令 或者 拒绝执行用户发布指令时而发出的报…

大数据之Flink优化

文章目录 导言:Flink调优概览第1章 资源配置调优1.1 内存设置1.1.1 TaskManager 内存模型1.1.2 生产资源配置示例 1.2 合理利用 cpu 资源1.2.1 使用 DefaultResourceCalculator 策略1.2.2 使用 DominantResourceCalculator 策略1.2.3 使用DominantResourceCalculato…

YOLOv9来了,可编程梯度信息与广义高效层聚合网络 助力全新检测SOTA前沿

本文首发:AIWalker 欢迎关注AIWalker,近距离接触底层视觉与基础AI技术 摘要 当今的深度学习方法侧重于如何设计最合适的目标函数,以便模型的预测结果最接近真实情况;与此同时,必须设计一个适当的架构,以便…

[electron]官方示例解析

官方例子 github链接 main.js const { app, BrowserWindow } require(electron)说句实话这里的语法是有部分看不懂的。导入模块虽然electron有很多模块。但是这里只是用到了app 和 BrowserWindow function createWindow () {// Create the browser window.const mainWindo…

go语言的理解,看这一篇就够了

1.来源 Go语言是谷歌2009年发布的第二款开源编程语言 2.谷歌为什么要创建Go语言 计算机硬件技术更新频繁, 性能提高很快,默目前主流的编程语言发展明显落后于硬件,不能合理利用多核多CPU的优势提升软件系统性能软件系统复杂度越来越高,维护成本越来越高,目前缺乏一个简洁而高效…

SSM项目集成Spring Security 4.X版本 之 加入DWZ,J-UI框架实现登录和主页菜单显示

目录 前言 一、加入DWZ J-UI框架 二、实现登录页面 三、实现主页面菜单显示 前言 大家好!写文章之前先列出几篇相关文章。本文内容也在其项目中接续实现。 一. SSM项目集成Spring Security 4.X版本(使用spring-security.xml 配置文件方式&#xff…

eclipse中open Type 、 open type in Hierachy、open Resource的区别

目录 场景: open Type open Resource open type in Hierachy 场景: 在项目中想要研究底层代码,经常要用eclipse看依赖jar包的类,比如spring的源码中AbstractApplicationContext类CTLSHIFTT用的少,经常用的CTLSHIR…