位置: 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.】(成功解决冲突的能力英语)

  • 菜鸟裹裹能看到别人给我买的东西吗(菜鸟裹裹能看到亲友寄给别人的快递吗)

    菜鸟裹裹能看到别人给我买的东西吗(菜鸟裹裹能看到亲友寄给别人的快递吗)

  • 荣耀手机怎么查看电池寿命(荣耀手机怎么查看本机号码)

    荣耀手机怎么查看电池寿命(荣耀手机怎么查看本机号码)

  • 支付宝在吗是什么东西(支付宝在吗是什么鬼)

    支付宝在吗是什么东西(支付宝在吗是什么鬼)

  • 华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

    华为手机如何恢复出厂设置(华为手机如何恢复删除的微信聊天记录)

  • 朋友圈设置部分人可见怎么解除(朋友圈恢复)

    朋友圈设置部分人可见怎么解除(朋友圈恢复)

  • 西瓜视频审核需要多久(西瓜视频审核需要7天多久)

    西瓜视频审核需要多久(西瓜视频审核需要7天多久)

  • 华为手机搜索不到5gwifi(华为手机搜索不到wifi)

    华为手机搜索不到5gwifi(华为手机搜索不到wifi)

  • 返回上一级快捷键(如何返回上一级)

    返回上一级快捷键(如何返回上一级)

  • 苹果闪光灯在哪里关(苹果13闪光灯怎么开启)

    苹果闪光灯在哪里关(苹果13闪光灯怎么开启)

  • 扫描件是什么意思(扫描件怎么搞)

    扫描件是什么意思(扫描件怎么搞)

  • 无线局域网似乎未接入互联网什么意思(无线局域网似乎未接入互联网弹窗)

    无线局域网似乎未接入互联网什么意思(无线局域网似乎未接入互联网弹窗)

  • 西瓜视频直播抖音能看到吗(西瓜视频直播抖音看得到吗)

    西瓜视频直播抖音能看到吗(西瓜视频直播抖音看得到吗)

  • vue data为什么是函数(vue中的data为啥要return)

    vue data为什么是函数(vue中的data为啥要return)

  • siri建议有什么用途(siri建议的app是经常用还是什么)

    siri建议有什么用途(siri建议的app是经常用还是什么)

  • 华为手机热点在哪个里面可以找到(华为手机的个人热点在哪里)

    华为手机热点在哪个里面可以找到(华为手机的个人热点在哪里)

  • 淘宝两颗心是多少笔交易(淘宝两颗心是什么意思)

    淘宝两颗心是多少笔交易(淘宝两颗心是什么意思)

  • 蓝牙耳机放回仓就充电吗(蓝牙耳机放回仓里还在连接状态)

    蓝牙耳机放回仓就充电吗(蓝牙耳机放回仓里还在连接状态)

  • 微信红包收不到钱必须绑卡才能收吗(微信红包收不到怎么办)

    微信红包收不到钱必须绑卡才能收吗(微信红包收不到怎么办)

  • 微信销号后聊天记录还有吗(微信销号后聊天记录法院能查到吗)

    微信销号后聊天记录还有吗(微信销号后聊天记录法院能查到吗)

  • 分辨率1280x720是什么(分辨率1280x720是几k)

    分辨率1280x720是什么(分辨率1280x720是几k)

  • mtk6795是什么处理器(mtk6799)

    mtk6795是什么处理器(mtk6799)

  • 解锁屏保广告如何取消(锁屏 广告)

    解锁屏保广告如何取消(锁屏 广告)

  • 小天才电话手表y05功能(小天才电话手表怎么添加联系人)

    小天才电话手表y05功能(小天才电话手表怎么添加联系人)

  • p30pro像素是多少(华为p30pro像素是多少)

    p30pro像素是多少(华为p30pro像素是多少)

  • 手机上wps文档怎么打包(手机上wps文档怎么传到电脑wps上)

    手机上wps文档怎么打包(手机上wps文档怎么传到电脑wps上)

  • 手机版微博id在哪儿(手机版微博id在哪里找)

    手机版微博id在哪儿(手机版微博id在哪里找)

  • 动态市盈率与静态市盈率区别百度百科
  • 小规模纳税人缴纳增值税怎么算
  • 整形医院有收费标准么
  • 金蝶未结账是否可以重新起账
  • 管理费用期末有余额么
  • 收到政府土地收回的短信
  • 长投损失了如何处理
  • 以前年度损益调整账务处理分录
  • 营改增之后还有营业税金及附加吗
  • 我公司去年职工工资多少
  • 存货账实不符的税务风险
  • 生产性生物资产计提折旧的方法
  • 应收股利属于其他业务吗
  • 专票小数点后两位没有显示出来可以认证吗
  • 一般纳税人兼营不同税率的货物或应税劳务
  • 一般纳税人不能转为小规模纳税人吗
  • 你需要来自system的权限怎么解决
  • 固定资产折旧计算方法
  • 苹果微信朋友圈怎么发文字不带图片
  • 对于接受捐赠的资产价值,应计入当期损益
  • 房产营销策划经典案例
  • sonar-scanner需要配置环境变量
  • 美国大峡谷在哪儿
  • 外贸行业税率
  • 未认证用户是什么意思
  • 发票中的密码区是如何形成的
  • 差旅费报销应注意什么
  • gpt3 api
  • 商业企业退货与退款区别
  • 存放中央银行款项借方表示什么意思
  • 金税盘全额抵扣分录
  • 其他业务收入不交增值税吗
  • 存货资产减值损失借贷方向
  • 贴现金额的会计分录
  • 销售并提供安装服务怎么开票
  • 个人所得税进什么科目
  • sql20054n
  • PostgreSQL教程(九):事物隔离介绍
  • 文化建设费税率
  • 所得税费用影响当期损益吗
  • 坏账准备怎么做底稿
  • 进项税留抵税额是什么意思
  • 股票质押式回购交易是什么意思
  • 补提折旧以前年度损益调整
  • 预付账款在何时可以转出
  • 收到国税退税收怎么做账
  • 年平均资金占用额是动态平均数吗
  • 零星采购多少不需要发票
  • 个体工商户免征增值税政策
  • 上次年检怎么查
  • 如何整理装订记账凭证
  • u盘怎么安装win2012
  • 微软宣布9月30日停止在俄罗斯服务
  • windows允许多用户登录
  • u盘重装操作系统怎么办
  • windows10日历没有显示农历
  • centos中如何查看ip地址
  • xp系统进程
  • 影响电脑速度的因素
  • windowsxp教程
  • win7系统网络连接禁用怎么开启
  • win10正式版发布时间
  • win8.1系统怎么激活
  • cocos creator源码
  • js判断数组是否相等
  • jquery操作表格
  • python中字符串类型和元组类型均不可变
  • 用python编写
  • python3使用PyMysql连接mysql数据库实例
  • node.js操作
  • Facebook推出强大Android图片库Fresco 自动释放内存 图片缓存 内存益处
  • idea 分析源码
  • hadoop运行python程序
  • nodejss
  • js的变量
  • jQuery Ajax 加载数据时异步显示加载动画
  • bootstrap steps
  • 青岛已开通几条地铁线路
  • 增值税税率有哪些规定
  • 有限公司怎么交五险
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设