【Web前端基础知识】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。

1. const moduleA = { 
2.   state: { ... }, 
3.   mutations: { ... }, 
4.   actions: { ... }, 
5.   getters: { ... } 
6. } 
7.  
8. const moduleB = { 
9.   state: { ... }, 
10.   mutations: { ... }, 
11.   actions: { ... } 
12. } 
13.  
14. const store = new Vuex.Store({ 
15.   modules: { 
16.     a: moduleA, 
17.     b: moduleB 
18.   } 
19. }) 
20.  
21. store.state.a // -> moduleA 的状态 
22. 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中。