vueX基础

vueX

在VueX对象中,其实不止有state,还有用来操作state中数据的方法集,以及当我们需要对state中的数据需要加工的方法集等等成员

  • state 存放状态(声明)

  • mutations state成员操作(修改的方法,写在此)

  • getters 加工state成员给外界

  • actions 异步操作(异步修改)

    modules 模块化状态管理

state

跨组件通信,都写在state中

点击改变state中的num值

image-20200930115203320

image-20200930115149564

mutations同步操作

这是对所有属性修改的方法

先在mutations中定义要修改属性所用的方法

image-20200930115538033

在其他页面,调用mutation中定义的方法

image-20200930115929942

image-20200930115714010

actions 异步操作

先在action中定义要修改属性所用的异步方法

image-20200930120313389

在页面中调用,actions中异步方法

image-20200930120408190

简写

辅助函数

mapMutations是Mutations的集合

image-20200930141038236

mapState是state的集合

image-20200930141216583

mapActions是actions的集合

集合中的方法名,必须带引号,并且要和store中index.js中定义的一致

image-20200930141507364

image-20200930141421292

mapGetters是getters的集合

image-20200930142614071

getters

加工state,例如在store/index.js中算总价

在store/index.js中定义

image-20200930141812513

在页面中调用

image-20200930141858680

image-20200930141832222

module

image-20200930142318202

image-20200930142536571

数据简写取值

image-20200930143117879

image-20200930142949762

方法简写取值

image-20200930143409974

控制导航栏的显示与隐藏

image-20200930104249836

通过声明周期改变$store中的数据(不推荐)

image-20200930104640436

通过路由改变

通过路由控制,进入某些页面时,导航栏消失

image-20200930114055312

image-20200930114128534

image-20200930114251712

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值