大白话讲vuex

Vuex的基本概念

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

什么是状态管理模式

让我们从一个简单的 Vue 计数应用开始：

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

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

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

当我们应用 多个组件共享状态 时，单向数据流的简洁性很容易遭到破坏：

1. 多个视图依赖于同一状态。
2. 来自不同视图的行为需要变更同一状态。

那么如此一来就会产生以下问题
1、对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

大白话言之，就是数据和数据的改变跟视图杂糅在一起 复杂且容易出事，那么vuex的思想就是把组件的共享状态抽取出来，以一个全局单例模式管理，通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护

vuex的组成结构及示意图

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。

我们来通过上文介绍到的计数应用看下vuex内部结构来理解

通过这个项目的视图以及数据处理我们很容易发现vuex的四个核心概念state getters actions mutations,下面我们一一介绍

state

可以发现项目click次数对应着state里的count,也就是说state对应着vuex 里面的数据源，需要保存的数据就保存在这里 组件中使用this.$store.state.count访问到state里面的count这个状态

getters

依旧是通过项目发现视图中even odd (奇偶数)是通过getters来过滤的 这就很类似于计算属性，获取的话也可以通过this.$store.getters.evenOrOdd,本例子是用另外一种写法mapGetters,当然现在多用…mapGetters,同理 state以及接下来讲的action也可以这样使用mapState mapActions mapMutations

 		...mapGetters(['evenOrOdd'])

mutations

上面例子中没有单独直接使用mutations例子 这里再贴代码 方便理解
修改 store 中的 值，方法就是提交 mutations 来修改
在组件页，可以简单给两个按钮：

在配置文件 store.js 入下：

actions

因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数 当然也可以直接使用mapActions就比较方便了，这样基本上就不使用dispatch和commit提交了不用过于纠结，也就是说大多数时候mutations是配合actions来使用，如本文例子。

建议初学者通过简单的计数应用去学习理解，最后贴上文中所引用项目地址 https://github.com/vuejs/vuex.git