Vuex - 绑定(bind)助手中的动态命名空间(mapState，...)

Question

我正在动态注册 vuex 商店模块
store.registerModule('home.grid', GridStore)
然后在组件中:

export default {
name: 'GridComponent',

props: {
  namespace: {
    type: String,
    required: true
  },

 computed: {
    ...mapState(this.namespace, ['filter']) // doesn't work
    filter() { // more verbose but working
      return this.$store.state[this.namespace].filter
    }
 }
 ...

但我得到了错误:

Cannot read property 'namespace' of undefined

任何的想法 ？

问题最初是从“gabaum10”这里提出的 https://forum.vuejs.org/t/vuex-dynamic-namespaces-in-mapstate-mapactions/28508

Answer 1

在这里解决 https://github.com/vuejs/vuex/issues/863#issuecomment-329510765

{
  props: ['namespace'],

  computed: mapState({
    state (state) {
      return state[this.namespace]
    },
    someGetter (state, getters) {
      return getters[this.namespace + '/someGetter']
    }
  }),

  methods: {
    ...mapActions({
      someAction (dispatch, payload) {
        return dispatch(this.namespace + '/someAction', payload)
      }
    }),
    ...mapMutations({
      someMutation (commit, payload) {
        return commit(this.namespace + '/someMutation', payload)
      })
    })
  }
}