对vuex的理解及其使用

一、vuex基础

Vuex 是什么？

• Vuex 是一个专门为 Vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是状态管理模式？

流程：

• 页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。
  mutation会修改state中对于的值。 最后通过getter把对应值跑出去，在页面的计算属性中
  通过mapGetter来动态获取state中的值

以下是一个表示“单向数据流”理念的简单示意：

这个状态自管理应用包含下面几个部分：

• state： 驱动应用的数据源；
• view： 以声明方式将 state 映射到视图；
• actions： 响应在 view 上的用户 输入导致的状态变化。

使用vuex的好处？

• 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，代码就会变得更加具有结构性且易维护。

vuex与其他模式的对比？

*借鉴了 Flux、Redux 和 The Elm Architecture。
*与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

什么时候我们应该使用vuex？

需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择.

二、Vuex的核心概念(五个)

State

state中保存着共有数据，数据是响应式的

Getter

getter可以对state进行计算操作，主要用来过滤一些数据，可以在多组件之间复用

Mutations

mutations定义的方法动态修改state中的数据，通过commit提交方法，方法必须是同步的

Actions

actions将mutations里面处理数据的方法变成异步的，就是异步操作数据，通store.dispatch来分发actions，把异步的方法写在actions中，通过commit提交mutations，进行修改数据。

Module

modules：模块化vuex