自定义事件：
监听：
vm.$on("eventname", callback);
vm.$once("eventname", callback)
触发：
vm.$emit("eventname", params);
接触：
vm.$off("eventname", callbackName)；
不带参数移除所有的事件
只提供事件，移除该事件的监听器
提供事件与回调，只移除这个回调的监听器
Vue的事件系统不同于浏览器的 EventTarget API ； $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。
Vuex （React ---> redux）
提供了一个管理数据的对象（或构造器 Vuex.Store），通过插件的方式，使各个组件可以访问共享的数据；
提供了一套修改数据的方法和规则；
单向数据流；
State (react ---> state)
Vue Components 消费State
Actions 提交修改动作，包括异步行为 (react ---> action)
Mutations 唯一更改State的位置 (react ---> reducer)
Vuex.Store 构造器选项：
state
getters 从 store 中的 state 中派生出一些状态（多个组件可以共享此属性）。
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。（可以认为 store 的计算属性 ）
getter 接受 state 作为其第一个参数：
也可以接受其他 getter 作为第二个参数；
通过属性访问： store.getters ---> 暴露 store.getters 对象
通过方法访问： getter 返回一个函数
每次都会去进行调用，而不会缓存结果
对 store 里的数组进行查询时非常有用。
getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) }actions 类似于 mutation，不同在于：
1. action 提交的是 mutation，而不是直接更改状态
2. action可以包含任意异步操作
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
action通过 store.dispatch 触发
组件中使用 this.$store.dispatch(''XXX") 分发或触发 action
mutations 每一个mutation都有一个 事件类型的 type 和 回调函数handler ---> 必须是同步函数
handler 是我们实际进行数据状态更改的地方, 并且会接受 state 作为第一个参数；
调用 ： store.commit( type)
你可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
mutation需遵守 vue 的响应规则：
1. 最好提前在 store 中初始化好所有所需属性
2. 需要在对象上添加新属性时：
2.1 使用 Vue.set( obj, 'newProp', 123) 或者
2.2 或者以新对象替换老对象 ： state.obj = { ...state.obj, newProp:123 }
使用常量来替代 Mutation 事件类型：
在各种 Flux 实现中是很常见的模式
让你的代码合作者对整个 app 包含的 mutation 一目了然。
多人协作的大型项目中，这会很有帮助
辅助函数
mapGetters 仅仅是将 store 中的 getter 映射到局部计算属性
import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } }mapMutations 将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）
import { mapMutations } from 'vuex'
export default {
// ... methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } }
mapActions 将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ ' increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } }
补充知识：
在ES6中，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量。
var attName = 'name';
var p = {
[attName] : '李四', // 引用了变量attName。相当于添加了一个属性名为name的属性
age : 20
}
console.log(p[attName]) // 李四
BFF: Backend For Frontend（服务于前端的后端）