vuex自己的简单理解

1.vuex作用:它是一个管理数据的一个东西,可以系统的管理数据.好处是每个组件都可以读取和修改这个数据.相对于全局事件总线(2个组件进行互相单向读书传递数据如果修改就要写2遍很麻烦)来讲比较方便. 可以这么理解其等于全局事件总线➕数据代理get set 方法

 

2.vuex引入:npm i vuex(tips:注意vue与vuex的版本问题下载的时候)

3.vuex流程图:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDnp4PlpLTlsI_pmL_mtps,size_20,color_FFFFFF,t_70,g_se,x_16 

解释:

注意这边dispatch方法,commit方法都是在$store对象中,vuex里面有个store对象,因此必须先倒入vuex和vue,让vue可以使用到vuex插件即vue.use(vuex).之后创建store的实例对象,new vuex.store({})里面放上其上3个对象数据.

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDnp4PlpLTlsI_pmL_mtps,size_20,color_FFFFFF,t_70,g_se,x_16

 对象里面包含着Action异步调用,mutation可以修改state的属性,state里面用来存储数据

一般一个组件定义一个按钮回调函数如果其是同步传递数据可以直接commit(函数名,传递的数据)给到mutations去进行改变数据,如果是异步则需要先dispatch(函数名,数据)递给Action进行操作异步处理,再由action去进行commit给mutations进行数据变化改变.其三都是对象形式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDnp4PlpLTlsI_pmL_mtps,size_20,color_FFFFFF,t_70,g_se,x_16

 

总结理解:可以这么理解如果有筛选业务或者异步获取需要数据要先到action在给mutations处理数据.如果没有业务只是进行当前同步传值直接commit给mutations对象.最后数据的变化形式由mutation来进行处理相当于计算属性变化数据,而action相当于方法传递筛选需要数据.

最后states与vc实例对象进行数据同步处理改变数据.

4.action对象中每个对象函数(context,value),context相当于小型的store对象,里面有dispatch,commit方法.value代表传递的值

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDnp4PlpLTlsI_pmL_mtps,size_20,color_FFFFFF,t_70,g_se,x_16

 

mutation对象中函数(state,value),state就是存储在state对象的数据,value为传递进来的数据.准备进行加工

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETkDnp4PlpLTlsI_pmL_mtps,size_20,color_FFFFFF,t_70,g_se,x_16

 

state的数据经过mutations修改后就可以放在组件身上,注意vm的实例对象中要导入其store数据

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秃头小阿涛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值