Vue ---day06

自定义事件：

　　监听：

　　　　　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（服务于前端的后端）