…mapActions({方法名: ‘global/方法名’}),和…mapActions([‘方法名’])的区别

在Vuex中,mapActions是一个辅助函数,用于将store中的actions映射到组件的methods中,方便在组件中调用actions。这两种写法的主要区别在于映射方式和使用场景

1. 数组形式:...mapActions(['updateCodeCountdown'])

  • 功能:将store中名为updateCodeCountdown的action直接映射到组件的methods中,组件中可以通过this.updateCodeCountdown()直接调用该action。
  • 使用场景
  • 当组件中需要调用的方法名与store中action名完全相同时
  • 当store中的action没有被命名空间隔离时(即模块没有设置namespaced: true

2. 对象形式:...mapActions({ updateCodeCountdown: 'global/updateCodeCountdown' })

  • 功能:将store中指定路径的action映射到组件的methods中,冒号前面是组件中使用的方法名,冒号后面是store中action的完整路径。
  • 使用场景
  • 当需要自定义组件中的方法名时(例如避免命名冲突)
  • 当store中的action被命名空间隔离时(即模块设置了namespaced: true),需要通过完整路径访问action,格式为模块名/action名

在你的项目中的应用

在你的项目中,global模块没有开启命名空间(没有设置namespaced: true),所以:

  • 使用数组形式...mapActions(['updateCodeCountdown'])是正确的,因为不需要在action名前加上模块名
  • 之前使用对象形式...mapActions({ updateCodeCountdown: 'global/updateCodeCountdown' })报错,是因为global模块没有开启命名空间,Vuex无法找到global/updateCodeCountdown这个action

总结

  • 数组形式:简单直接,适合无命名空间或方法名与action名相同的情况
  • 对象形式:灵活,适合需要自定义方法名或有命名空间的情况

在使用mapActions时,需要根据store中模块是否开启命名空间来选择合适的写法,否则会出现找不到action的错误。

Comments

No comments yet. Why don’t you start the discussion?

发表回复