是什么
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都会自动注册模块路径
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)