vuex与eventbus

 是什么

 vuex是专门为vue.js开发的状态管理模式

它解决的多个组件依赖同一个状态的情况，适用于在单页面中，跨组件状态管理，登录状态管理，购物车管理等等

相对而言结构比较复杂，对于简单页面没必要使用 

 

eventBus又称事件总线，他使用的事订阅发布模式，一般于vue的prototype上注册一个事件中心，用于接收事件已经发送事件，以便全局使用

但是他又有一个比较严重的问题，维护困难，因为他没有明确可维护的列表，完全是定义了什么，才能用什么，一旦不是原开发者维护（甚至原开发者）会一团乱麻

 

 怎么用

 vuex包含了五个属性

1.state，数据存储，也就是vuex中状态管理中的状态

2.getters，可以理解为vuex中的计算属性，可以对sate进行简单的运算后返回，并且实时监听数据的状态，在多模块的vuex结构中也经常用于直接获取对应模块的值

3.mutations，数据操作，也就是vuex状态管理的的管理，所有直接操作state的方法都在这里，所有变更state的方式都必须经过mutations，触发执行mutations的方法是commit的方法

4.actions，异步操作，mutaions一般用于直接操作state，而actions则是在异步请求获取数据后执行commit修改state的值，触发actions的方法是dispath

5.modules，模块，当数据量大的时候，仅仅使用一张表也一样不好管理，因此出现了模块化

   要注意，模块内部基本与外部结构一致，但不同的地方有，

   1）namespace属性，这会让他成为带命名的空间模块，模块内容不的state，getters，mutation，actions都会自动注册模块路径，当他为false时，module的内容与根目录的内容就等于根目录上的内容

   2）mutations和actions的函数的参数多了context.rootState，context.rootGetters访问根目录数据

   3）dispatch,commit可以传递第三个参数为{root:true},在根目录开始触发，

dispatch('vip/get', data, {root: true}) 

 

   4）mutations和actions想在具名模块里注册全局action

 

      actions: {
        someAction: {
          root: true,
          handler (namespacedContext, payload) { ... } // -> 'someAction'
        }
      }

 

 

 6，modules是可以在store创建之后追加上去

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})

 

 

 

 

 

eventBus的使用方法

import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()

//订阅
this.$EventBus.$on('xxx',(text)=>{
    console.log(text)
})

//发布
this.$EventBus.$emit('xxx',666)