vuex实践

前言

为什么要用vuex进行状态管理？

• 在业务简单的项目中，完全没有必要因为觉得vuex高大上，就使用它，也许一个全局对象就能解决你的问题。
• 如果是业务复杂的中大型项目，vuex将会有效的帮助我们管理状态。比如多个组件(父子组件，兄弟组件)共享状态，有些情况通过传参也不容易解决。

vuex图解

vuex组成

• store
  store就像一个仓库，里面存储着所有应用层级的state，
• getter
  主要用来从store中获取state的具体值
• mutations
  每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
  回调函数就是实际进行状态更改的地方。
• actions
  action用来提交mutation，而不是直接变更状态。

demo

源码请点击这里

计数器流程

以计数器为例子，父组件用于展示count的值；点击子组件A，count会减一；点击子组件B，count会加一。

• store存储count
• 父组件通过getter获取count，用于展示
• 子组件分发mutation