位置: IT常识 - 正文

Vuex 学习(vuex使用步骤)

编辑:rootadmin
Vuex 学习 什么是vuex:

推荐整理分享Vuex 学习(vuex使用步骤),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex的使用流程,vue vuex 快速入门,vuex使用步骤,vuex详解和用法,vuex实战,vuex教程,vuex入门,vuex教程,内容如对您有帮助,希望把文章链接给更多的朋友!

专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。  原理图

 安装使用vuex

注意:vue2.0 对应  vuex3.0,vue3.0 对应vuex4.0,如果版本选中错误就会报错

npm i vuex,如果用的是vue2.0 需要指定版本, npm i vuex@3  ,如果不指定版本,默认下载vuex4

vuex 的actions、mutations 、state并不是自己管理的,而是交给store管理的,当引入并

使用了vuex后,vm的对象上就会多了一个store属性。这个store 是一个js文件,并不是官方

提供的,而是自己创建的,store的代码如下:/store/index.js

注意引入和使用 vuex的操作是在  store/index.js中完成的,是因为vuex的使用必须在 生成store实例之前,在此处引入并使用vuex后,在main.js中引入store即可,然后创建的时候,传入store配置项

这样,vuex的开发环境就搭建好了  vuex的执行顺序是,this.$store.dispatch()触发 actions中的方法,acitons中的方法触发mutations中的方法,mutations中的方法操作state中的数据。

例如,如下代码

通过this.$store.dispatch('add',this.n) 触发 actions中的 add方法,dispatch的第一个参数为actions中的方法名,第二个参数为实际传的值,add方法的第一个参数是

context,第二个参数是实际传过来的值。 context 通过调用 commit 方法,触发mutations中的ADD方法,其中,commit方法中,第一个参数为  mutations中的方法名ADD,第二个参数为传递的值,ADD 也有两个参数,第一个参数为state,可以直接操作state中的数据,第二个参数为传过来的值。

也可以通过commit方法直接调用 mutations中的方法

页面展示state中的数据:

 getters 配置项:

是vuex新增的配置项,首先定义getters对象,然后在store中进行配置

里面有一个方法,是自定义的,参数就是 state,方法需要返回值

Vuex 学习(vuex使用步骤)

组件中显示getters中的返回值:

 4个map方法的使用:

4个map方法分别是,mapState、mapGetters、mapActions和mapMutations

为什么要使用这几个方法,是为了简化代码的写法,目前从state和getters中取数据都是通过

{{$store.state.sum}} 和{{$store.state.bigSum}}这种方式,模板中尽量使用简单的表达式,所

以可以改为在计算属性中返回值

模板中直接调用计算属性的方法名取值即可,

如果state中的属性较多,就需要一个一个的写计算方法,所以可以通过vuex的map方法帮我们去映射store中的属性和方法

首先需要引入

import {mapState,mapGetters} from vuex

对象写法中的每一个对象的第一个参数对应计算属性中的方法名,可以不加引号,在模板调用时使用,第二个参数对应state中的属性,必须加 引号 ,数组写法,每个元素对应state中的属性,必须加 引号,模板解析时,直接 {{sum}}  和{{school}} 即可。前面的 三个点必须加,这是因为mapState返回的是一个对象,对象里面的本质是一个个函数,所以需要将mapState进行拆包,否则会报错。

mapGetters同理,对应的是getters中的函数

mapActions和mapMutations 用于帮我们生成和  actions和mutations对话的方法,

要使用的话,首先先引入

import {mapActions,mapMutations} from vuex

这里只介绍mapMutations的写法,mapActions同理。如下图的三种写法,效果是一样的

亲自的写法,在调用的时候,是不需要传参的,直接调用方法名即可,参数在commit的时候再传入,如下图所示

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

ADD对应  mutations中的方法

本文链接地址:https://www.jiuchutong.com/zhishi/295207.html 转载请保留说明!

上一篇:【控制】动力学建模简介 --> 牛顿-欧拉 (Newton-Euler) 法和拉格朗日 (Lagrange) 法(控制系统动力学)

下一篇:成功解决:npm 版本不支持node.js。【 npm v9.1.2 does not support Node.js v16.6.0.】(成功解决冲突的能力英语)

  • 什么是应税服务中止
  • 公积金贷款金额少怎么办
  • 药品费用开具增值税发票项目应为什么
  • 购买网银盾计入什么科目
  • 子公司注销应收母公司往来款
  • 未实际处置资产怎么处理
  • 支付给银行的借款利息属于什么会计要素
  • 流动资产投资的特点有
  • 企业所得税审计的内容包括哪四个方面
  • 建造合同中甲供材选择一般计税还是简易计税更省税?
  • 填报企业所得税资产总额怎么填
  • 企业生产总值怎么算出来的
  • 电商公司购买拍照违法吗
  • 网络发票开具
  • 举办活动 举行活动
  • mac复制文件路径后怎么粘贴
  • 租赁合同维修义务谁承担
  • 其他货币资金包括哪些项目
  • php substring
  • win10更新kb5006670
  • 如何在WIN10系统安装IE浏览器
  • win11预览版怎么变回正式版
  • 代收代付的垃圾清运费没发票能入账吗
  • 既征收消费税又征收增值税的是
  • 施工机械保险费属于什么费用
  • 发财树怎么养护与浇水
  • 单用户结构是什么
  • 公司转让账务处理,账户抹平
  • 公司收到投资款怎么写收据?
  • php限制接口调用次数
  • php面向对象的三大特征
  • 回顾2021年作文
  • Vue3通透教程【十三】TS简单类型详解
  • lvs命令
  • 税务代开,开错了重开要多久?
  • 小企业会计制度和企业会计制度的区别
  • 取得不规范发票的处理
  • 进项税额申报表怎么填写
  • php 时间
  • 现金流量表编制格式
  • Table ‘xxx’ is marked as crashed and should be repaired 错误解决方法参考
  • 自行建造的固定资产达到预定可使用状态
  • 营业收入的构成分析应该从哪些方面进行?
  • 现时社保缴费
  • 收据和发票有什么用
  • 计提的坏账准备计入什么科目
  • 提供劳务收入包含什么
  • 合同履约成本与一份当前或预期取得的区别
  • 收到税务局退回税款会计分录
  • 网上交税已经缴费怎么退
  • 实收资本如何进行核算
  • 建筑安装业经营范围
  • 新会计准则开办时间规定
  • 从增值税抵扣进项怎么算
  • 居间活动费用由谁负担
  • 什么是建账户
  • 磁盘清理后文件还在吗?
  • linux的命令行指的是什么
  • windows102021年更新
  • linux ls常用命令
  • win7系统注册表损坏无法启动
  • 生产运维管理
  • centos smb服务
  • linux去掉指定字符
  • win10系统中打开任务管理器的快捷键
  • jquery实战
  • perl 字符串处理
  • js取二维数组数组的值
  • 深入领悟六个必须坚持
  • jqueryif判断
  • Caused by: android.content.ActivityNotFoundException: No Activity found to handle Intent错误的记录。
  • javascript学习指南
  • jquery入口
  • 破产重整资产的税务优惠
  • 火车票抵扣申报表怎么填
  • 台州土地成交
  • ca证书网上申请
  • 南京税务局几点下班
  • 北京社保三方协议
  • 贸易公司服装
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设