简化 Vuex 模块访问

Question

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

来自这里：

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

为此：

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

Answer 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']

简化 Vuex 模块访问

Simplify Vuex modules access

vue.js

vuex

vuex-modules