Vuex

一、Vuex是什么

  Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。Vuex可以理解为一种开发模式或框架，通过状态集中管理驱动组件的变化，应用级的状态集中放在store中，改变状态的方式是提交mutations,异步逻辑封装在action中

应用场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。

1、Vuex的构成

  由上图，我们可以看出Vuex有以下几个部分构成：

1）state

state是存储的单一状态，是存储的基本数据。

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moduleA = {

  state: { ... },

  mutations: { ... },

  actions: { ... },

  getters: { ... }

}

const moduleB = {

  state: { ... },

  mutations: { ... },

  actions: { ... }

}

const store = new Vuex.Store({

  modules: {

    a: moduleA,

    b: moduleB

  }

})

store.state.a // -> moduleA 的状态

store.state.b // -> moduleB 的状态

6）辅助函数

Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

二、Vuex的设计思想

  Vuex的设计思想，借鉴了Flux、Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

小结

  Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

Vue组件简单常用的通信方式有以下几种：

1、父子通信：

父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。

2、兄弟通信：bus

3、跨级嵌套通信：bus；provide / inject等。

Vuex可以理解为一种开发模式或框架，通过状态集中管理驱动组件的变化，应用级的状态集中放在store中，改变状态的方式是提交mutations,异步逻辑封装在action中。