vue----vuex

什么是vuex?

vuex是一个专门为vue应用程序开发的状态管理模式。在一个比较大的项目开发中,多次的通过组件传参的方式来同步data的值,这样对管理以及维护的工作造成困扰,所以,vuex是一个为这些多个组件频繁使用的值提供统一的管理。

当创建一个项目的时候,要空格选择vuex,创建成功之后文件夹下面的src就会有有一个store文件夹。
在这里插入图片描述
1.在组件中使用vuex:
要将state中定义的name拿来在h1中标签中显示
在这里插入图片描述
在组件中使用:
在这里插入图片描述
2.vuex的工作流程图:
在这里插入图片描述
3.Vuex对象及说明:

  • state:放置全局状态
  • mutations:修改数据、状态的方法(methods)
  • getters:计算属性
  • actions:异步修改数据,从服务器请求数据
  • modules:vuex细分模块

3.1 mutations传值

mutations有两个形参,function(state, payload){},state是当前vuex对象的state;payload是这个方法被调用时传递参数使用的。
提交方式1:
在这里插入图片描述
提交方式2:
在这里插入图片描述

接受挂载参数:
在这里插入图片描述

3.2 getters
getters有两个形参,function(state, getters ){},state是当前vuex对象的state;getters 当前getters对象,用于将getters下的其他getter拿来用。
在这里插入图片描述
3.3 actions
actions有两个形参,function(context , payload ){},context 上下文(相当于箭头函数中的this)对象,payload 挂载参数。
在组件中调用
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值