位置: 编程技术 - 正文

vue的状态管理模式vuex(vuex状态机)

编辑:rootadmin

推荐整理分享vue的状态管理模式vuex(vuex状态机),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 状态管理,vuex状态管理几种状态,vue状态机,vuex状态管理几种状态,vue中的状态管理,vuex状态管理几种状态,vuex状态管理几种状态,vue中的状态管理,内容如对您有帮助,希望把文章链接给更多的朋友!

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。

备注:本文的示例等代码将会采用es6的语法。

链接

vuex官方中文网站 使用vue和vuex实现的简易商城,仅供参考

vuex是什么?

先引用vuex官网的话:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

状态管理模式、集中式存储管理 一听就很高大上,蛮吓人的。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用。这么说吧,将vue想作是一个js文件、组件是函数,那么vuex就是一个全局变量,只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中,经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时,我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系,或者一个状态需要共享给多个组件时,就会非常麻烦,数据也会相当难维护,这对我们开发来讲就很不友好。vuex 这个时候就很实用,不过在使用vuex之后也带来了更多的概念和框架,需慎重!

vuex里面都有些什么内容?

Talk is cheap,Show me the code. 先来一段代码间隔下这么多的文字:

vue的状态管理模式vuex(vuex状态机)

这个就是最基本也是完整的vuex代码;vuex 包含有五个基本的对象:

state:存储状态。也就是变量; getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多; mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit('SET_AGE', )。和vue中的methods类似。 actions:和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch('nameAsyn')。 modules:store的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()。

vue-cli中使用vuex的方式

一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。

state.js示例:

getters.js示例(我们一般使用getters来获取state的状态,而不是直接使用state):

mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):

mutations.js示例:

actions.js示例(异步操作、多个commit时):

modules--m1.js示例(如果不是很复杂的应用,一般来讲是不会分模块的):

index.js示例(组装vuex):

最后将store实例挂载到main.js里面的vue上去就行了

在vue组件中使用时,我们通常会使用mapGetters、mapActions、mapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:

总结

标签: vuex状态机

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

上一篇:3种vue组件的书写形式(vue组件精讲)

下一篇:VueJs使用Amaze ui调整列表和内容页面(vue alain)

  • 行政事业单位转账至个人账户条例
  • 企业交的增值税怎么做账
  • 增值税专用发票有效期是多长时间
  • 房屋契税缴纳比例
  • 餐饮行业的成本率在多少才正常
  • 工资与社保的关系怎么写
  • 盈利幼儿园和非盈利幼儿园的政策
  • 资产整体转让税收
  • 装修费能否一次性支付
  • 政府补助款提现流程
  • 购置股权账务处理流程
  • 开增值税发票开户行怎么填?
  • 租赁费交税税率是多少
  • 地税印花税怎么算
  • 发票签收单怎么填
  • 去新建的外贸公司好不好
  • 用友t3怎么删除损益结转凭证
  • 汽车装饰用品大全进货
  • 出售设备折旧
  • 企业注销后资金处理
  • 利息收入需要开票吗
  • 残疾人保障金怎么做账
  • 付货款时从货款中扣除的返利怎样做账?
  • 进项税额已经认证抵扣了怎么处理
  • 建筑企业收到预收账款要交增值税吗
  • 股份公司的架构
  • 筹建期无形资产土地要摊销吗
  • 微软的机会
  • 黄石国家公园的英语怎么读
  • 最早的手机是哪一年
  • 国家规定发票多久之内可以开
  • 微信小程序实现灯泡开关效果
  • php多维数组转一维数组
  • 定期定额个体户超定额怎样申报
  • 计算完工产品成本和在产品成本的方法有哪些
  • 贝尔纳贝
  • php json格式
  • php数组实现原理
  • Yii2 rbac权限控制之rule教程详解
  • pytorch例程
  • 用html语言完成以下内容
  • sensor tester
  • 购买方红字信息表已开销售方系统查不到
  • 数据库帮助文档
  • sql2008数据库维护计划
  • 未开票收入本月要计提增值税吗
  • 发货环节产生的影响
  • 应收代位追偿款有没有明细科目
  • 应收票据到期收回的会计分录
  • 认缴制下实收资本需要验资吗
  • 记错科目怎么调整
  • 工程检测费的会计分录
  • 企业所得税虚报成本多少属于犯罪
  • 哪些合同不受法律保护
  • 微信扣除手续费超过多少免费
  • 可供分配利润的计算公式
  • 事业编制可以带计算器吗
  • 单位员工购买本地保险
  • 利得与损失的四种类型
  • 房地产企业成本控制存在的问题及对策
  • 详解十二建星择日方法
  • mysql怎么修改my.ini
  • Linux(Ubuntu)下Mysql5.6.28安装配置方法图文教程
  • win10 发布
  • linux的sh
  • linux切换到home文件夹
  • centos pam
  • win10 ie无法使用
  • linux设置权限755
  • linux常用命令cat
  • windows mobile
  • python爬取csdn
  • js字符串的操作方法
  • viewstock
  • unity3d总结
  • jquery下拉列表
  • android toolbar menu
  • 沈阳地方税务局原局长
  • weverse登录不了
  • 汽车销售顾问有前途吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设