Vuex- Action的 { commit }的写法
  TnD0WQEygW8e 2023年11月02日 96 0


vuex教程中,有这样一句话和这样一段代码:

实践中,我们会经常用到 ES2015 的参数解构来简化代码(特别是我们需要调用commit很多次的时候):

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

其中,{commit} 写法是解构后得到的,下面就简短解释一下简化的过程:


知识点:

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
因此这个context参数可以理解为store
即这个context参数可以使用commit提交mutation

所以,context也同样包含以下属性

{
  state,      // 等同于 `store.state`,若在模块中则为局部状态
  rootState,  // 等同于 `store.state`,只存在于模块中
  commit,     // 等同于 `store.commit`
  dispatch,   // 等同于 `store.dispatch`
  getters,    // 等同于 `store.getters`
  rootGetters // 等同于 `store.getters`,只存在于模块中
}

原写法:

actions: {
  increment (context) {
    context.commit('increment')
  }
}

相当于:

actions:{
  increment ({ commit: context.commit }) {
    context.commit('increment');
  }
}

相当于:

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

借鉴ES2015中对象的解构

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo);// "lorem"
console.log(bar);// "ipsum"



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  UPDXd5cjON6v   2023年12月04日   30   0   0 系统系统
  MsRARFCkHJat   2023年12月19日   114   0   0 系统系统
  nj1FYstZ6MDA   2023年12月12日   40   0   0 系统系统
  MsRARFCkHJat   2023年12月12日   52   0   0 系统系统
  GsoPuRo1Cayz   2023年12月19日   47   0   0 系统系统
TnD0WQEygW8e