es6 双箭头函数调用 连续箭头函数的理解 初识柯里化

例子来源:
https://vuex.vuejs.org/zh/guide/getters.html#通过方法访问
你也可以通过让 getter 返回一个函数,来实现给 getter 传参。

()=>()=>{}

参考
:es6 双箭头函数调用有什么意义?
https://segmentfault.com/q/1010000016320367

let getters = {
    total: (state) => (symbol) => {
        return (symbol || '$') + state.count;
    }
}
// 等效于
let getters = {
    total: function(state) {
         return function(symbol) => {
            return (symbol || '$') + state.count;
        }
    }
}

getters.total(state)(symbol)  //调用成功

柯里化参考:

皮小蛋:邂逅函数柯里化 https://segmentfault.com/a/1190000008263193
沃趣葫芦娃:大佬 JavaScript 柯里化,了解一下? https://juejin.im/post/5af13664f265da0ba266efcf
冴羽: JavaScript专题之函数柯里化 https://github.com/mqyqingfeng/Blog/issues/42

mapGetters

https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-辅助函数
当有参数的getters 写成

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

这样的时候,如果使用mapGetters辅助函数,其数组简写形式和无参的getters没有区别

  computed: {
    ...mapGetters(['doneTodosCount', 'doneTodos','getTodoById']),
    // getTodoById() {
    //   return this.$store.getters.getTodoById(2);
    // }
  },

只是在最终调用的时候,需要指出参数,如下,{{getTodoById(2)}}

<div>
      <hr>
      <p>gettersp>
      <p>{{doneTodosCount}}p>
      <p>{{doneTodos}}p>
      <p>{{getTodoById(2)}}p>
    div>
  div>

你可能感兴趣的:(javascript,Vue)