vuex

1.vuex是什么

vuex是vue.js的一种状态管理的模式，它通过全局注入store对象，来实现组件间的数据共享。适用于复杂的数据处理，如深层级组件的通信。

2.vuex的五个属性：

state，mutation，action，getter，module

state:（相当于vue中的data） this.$store.state，响应式数据，数据变化，组件同步更新。

getter：（相当于vue中的computed）this.$store.getter,,store的计算属性。

mutation：（相当于vue中的methods）,this.$store.commit('')，主要用来操作state数据。

action:与mutation类似，this.$store.dispach('')  包含异步操作，可以提交mutation，而不是直接更改state。

module：将store分割成模块，每个模块拥有自己的 state、mutation、action、getter,甚至是嵌套子模块

3.vuex数据传递流程：

当组件要进行数据修改的时候，通过dispach触发action里的方法，action里每个方法都有一个commit方法，通过commit来触发mutation里的方法，mutation里每个函数都有一个state参数，就可以在mutation修改state数据，state里数据是响应式的，就可以传递给页面，进行同步更新。当state里的数据需要经过计算时，可以使用getter属性，获取计算值。

4.优势：

vuex是要遵循一定的规则，把需要共享的数据抽取出来，在store里可以直接追踪 状态的变化过程，易于调试和管理。

减少ajax请求数，有些数据可以直接从内存中的state获取。

5、缺点：

刷新浏览器，state会变为初始状态。

解决方法：配合webStorage或者cookie这样的本地存储手段。

用localstorage来存储需要持久化的数据，启动vuex的时候直接从localStorage获取持久化的数据。

 

6.vue-bus和vuex：

bus是一个公共的vue实例，用来专门处理emit和on事件。

对于一些最父级上的提示遮罩，加载弹层比较适合，因为最父级不会被销毁，eventBus不会被重复地绑定和解绑。

问题：bus事件被多次触发。页面路由的时候，原有页面中的bus事件并没有被注销，依然隐藏在程序中。所以要在组件的beforeDestory钩子中注销。

vuex使用store对象来来做全局数据处理，制定了处理的原则和方法，统一管理。适合数据量大且复杂的项目。

对于深层级组件的通信，由于组件会被经常销毁和重建，就需要不断地建立和移除eventBus，会增大性能的开销，这时比较适合vuex。