vuex当中多个模块能够对同一 mutation 或 action 作出响应是什么意思呢

Question

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

文档里有这句话，请问多个模块能够对同一 mutation 或 action 作出响应是什么意思呢，一直不明白

Answer 1

默认情况下，假如你以如下的形式定义 vuex

const store = {
  state: {
    foo: 'root'
  },

  actions: {
    bar () {
      console.log('I am from the root of store')
    }
  },

  modules: {
    moduleA: {
      state: {
        foo: 'moduleA'
      },

      actions: {
        bar () {
          console.log('I am from moduleA')
        }
      }
    },


    moduleB: {
      state: {
        foo: 'moduleB'
      },

      actions: {
        bar () {
          console.log('I am from moduleB')
        }
      }
    }
  }
}

访问 根部 的 state this.$store.state.foo

访问 modules 的 state this.$store.state.moduleA.foo

但如果调用 this.$store.dispatch('bar') 则 3个 action 对应的 bar 函数都会被触发。

与默认情况不同的则是 命名空间模式，可对上面做如下修改:

const store = {
  state: {
    foo: 'root'
  },

  actions: {
    bar () {
      console.log('I am from the root of store')
    }
  },

  modules: {
    moduleA: {
      namespaced: true, // 修改

      state: {
        foo: 'moduleA'
      },

      actions: {
        bar () {
          console.log('I am from moduleA')
        }
      }
    },


    moduleB: {
      namespaced: true, // 修改

      state: {
        foo: 'moduleB'
      },

      actions: {
        bar () {
          console.log('I am from moduleB')
        }
      }
    }
  }
}

这时若要访问 moduleA 的 actions 中的 bar 函数，要这样 this.$store.dispatch('moduleA/bar')

如果要使用 辅助函数，则如下形式：

import { mapActions } from 'vuex'

export default {

    methods: {
        ...mapActions('moduleA', [ 'bar' ])
    }
}

Answer 2

看了上面的回答，文档故意写的这么晦涩。。，不过现在vuex的pr不合并了，也改不了了
改成下面这样更好一些

这样使得多个模块中的同名action/mutation 能够对一个 action的dispatch 或 mutation的commit 都作出响应。