714765…

什么是vuex

相当于react里面的redux。
vuex是一个转为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成到vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能

什么是状态管理模式？

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

state:驱动应用的数据源
view：以声明方式将state映射到视图：viewState
actions：响应在view上的用户输入导致的状态变化以下是一个表示“单向数据流”理念的简单示意：

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

多个视图依赖于同一个状态
来自不同视图的行为需要变更同一个状态对于问题一：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间状态传递无能为力。
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。
对于以上的问题，我们采取把组件的共享状态抽取出来，以一个全局单例模式进行管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更加结构化且易维护。这就是vuex背后的基本思想，借鉴了Flux、Redux和The Elm Architecture。与其他模式不同的是，vuex是专门为vue.js设计的状态管理库。以利用vue.js的细粒度数据响应机制来进行高效的状态更新。

vuex的工作流程

在vue组件里面，通过dispatch来触发actions提交修改数据的操作。
然后再通过actions的commit来触发mutations来修改数据
mutations接收到commit的请求，就会自动通过mutate来修改state（数据中心里面的数据）里面的数据。
最后有store触发每一个调用它的组件的更新。

vuex的作用

项目数据状态的集中管理，复杂组件（如兄弟组件、远房亲戚组件）的数据通信问题。注意在API中拿数据，就会牵扯到异步操作，所以我们把异步操作定义在action中，在组件中触发一个action，action里面有一个ajax请求，然后请求后端接口，拿到数据我们需要改变state中的状态，改变状态唯一的方式是commit提交一个mutation，提交以后state状态改变了，状态改变后，试图就会改变，因为vuex是响应式的。actions是做异步操作的（不做异步的话可以省略）。mutations：真正修改state的，触发它必须通过commit。

什么情况下使用vuex？

如果不打算开发大型单页应用，使用vuex可能是繁琐的。可以使用简单的store就可以了。但如果需要构建一个中大型单页应用，可能会考虑如何更好地在组件外部管理状态，vuex将会成为最自然的选择。

安装

在一个模块化的打包系统中，必须显式地通过Vue.use()来安装Vuex:

每一个vuex应用的核心就是store（仓库）。store基本上就是一个容器，它包含着应用中大部分的状态（state）。vuex和单纯的全局对象有以下两点不同：

vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

store的五大核心

state：vuex使用单一状态树----用一个对象就包含了全部的应用层级状态，至此它便作为“唯一数据源”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段。在调试的过程中也能轻易地取得整个当前应用状态的快照。
单状态树和模块化并不冲突
如何在vue组件中获得vuex状态
由于vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态：

用$store来读取

mapState辅助函数

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余，这时可以使用mapState辅助函数帮助我们生成计算属性。

mapState会遍历this.$store.state.因为上述用了箭头函数，所以内部不能使用this。
2. getters
有的组件中获取到store中的state，需要对其进行加工才能使用，computed属性中就需要写操作函数，如果有多个组件中都需要进行这个操作。那么在各个组件中都写相同的函数，那就非常麻烦。这是可以把这个相同的操作写到store中的getters，每个组件只要引用getters就可以了。getters就是把组件中共有的对state的操作进行了提取，他就相当于对state的computed。所以它会获得state作为第一个参数。
getters会暴露为store。getters对象。可以以属性的形式访问值。
第一种(没用getters的写法）：

用了getters的写法：

利用getters传值，将其写成高阶函数：

3. mutations
真正修改state的，相当于react中的action和reducers。可以直接修改state，写在store里。
更改vuex的store中的状态的唯一方法是提交mutation。vuex中的mutation非常类似于事件。每个mutation都有一个字符串的事件类型（type）（回调函数的名字）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接收state作为第一个参数。