vue2——vuex(状态管理模式)

它采用集中式存储来管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

为什么要使用状态管理???

比如一个情景,我们的一个应用有很多数据和状态。这个应用也是用很多的组件拼成的。

每个组件之间会共享一个状态。比如说:用户的登录状态、或者是一个购物车。然后这个购物车数据在很多页面用到了,当我在某个页面改变这个购物车数据时,页面也要进行一个同步的更新。比较简单的就是使用emit。但是当组件使用数量过多就会变得很复杂。

那么状态管理的模型是解决这个问题的。它有一个统一的数据中心,就是store

如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。

store:

store就是用来维护状态管理的数据。每一个组件更新的时候,就通知这个数据中心。那么数据中心就将这个共享的状态再去触发每一个调用它的组件的更新。

 

 

vuex:

vue组件通过actions这个动作来操作mutations,mutations控制数据中心的一个状态。状态更改以后再反应到页面更改的一个渲染。整个数据流程是单向的

组件通过dispath触发actions、actions通过commit触发mutations、mutations通过mutate操作state里的数据

其中vuex是有一定规则的

actions:执行异步操作(比如请求数据)

mutations:同步去更改数据的一种方法

组件中调用:

 

 

在Apple组件中: 

store.js 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值