简化 Vuex 模块访问答案

【问题标题】：Simplify Vuex modules access简化 Vuex 模块访问
【发布时间】：2019-11-10 21:48:54
【问题描述】：

有什么方法可以简化 Vuex 模块的访问？

从这里：

this.$store.dispatch('moduleA/save')
this.$store.getters['moduleB/someGetter']

到这里：

this.$store.moduleA.dispatch('save')
this.$store.moduleB.getters['someGetter']

【问题讨论】：

标签： vue.js vuex vuex-modules

【解决方案1】：

您是否查看过map* 助手？它们允许您将状态、getter、突变和操作作为常规属性直接导入到您的组件中。

import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('moduleB', [
      'someGetter'
    ])
  },

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

    test() {
      // Same as this.$store.dispatch('moduleA/save')
      this.save()

      // Same as this.$store.getters['moduleB/someGetter']
      this.someGetter
    }
  }
}

除此之外，您建议的语法是不可能的，但没有什么能阻止您编写自己的辅助函数来简化它的使用。

如果你真的想要你建议的语法，你可以像这样破解它（未经测试）：

function createModuleProxy(store, module) {
  return {
    state: new Proxy({}, {
      get(target, prop) {
        return store.state[module][prop]
      },
      set(target, prop, value) {
        store.state[module][prop] = value
        return true
      },
    }),
    getters: new Proxy({}, {
      get(target, prop) {
        return store.getters[module + '/' + prop]
      },
    }),
    dispatch(mutation, payload) {
      return store.dispatch(module + '/' + mutation, payload)
    },
    commit(action, payload) {
      return store.commit(module + '/' + action, payload)
    }
  }
}

store.moduleA = createModuleProxy(store, 'moduleA')
store.moduleB = createModuleProxy(store, 'moduleB')

store.moduleA.dispatch('save')
store.moduleB.getters['someGetter']

【讨论】：