Vuex: createNamespacedHelpers с динамическим пространством имен - PullRequest
Новая
       38

Vuex: createNamespacedHelpers с динамическим пространством имен

0 голосов
/ 08 февраля 2019

Почти во всех руководствах, руководствах, публикациях и т. Д., Которые я видел при регистрации модуля vuex, если модуль зарегистрирован компонентом, createNamespacedHelpers импортируется и определяется до оператора export default, например: 

import {createNamespacedHelpers} from 'vuex'
const {mapState} = createNamespacedHelpers('mymod')

import module from '@/store/modules/mymod'

export default {
  beforeCreated() {
    this.$store.registerModule('mymod', module)
  }
}

это работает, как и ожидалось, но что, если мы хотим, чтобы модуль имел уникальное или определяемое пользователем пространство имен? 

import {createNamespacedHelpers} from 'vuex'
import module from '@/store/modules/mymod'

export default {
  props: { namespace: 'mymod' },
  beforeCreated() {
    const ns = this.$options.propData.namespace
    this.$store.registerModule(ns, module)
    const {mapState} = createNamespacedHelpers(ns)
    this.$options.computed = {
      ...mapState(['testVar'])
    }
  }
}

Я думал, что это будет работать, но это не так.

Зачем нужно что-то подобное?потому что 

export default {
  ...
  computed: {
    ...mapState(this.namespace, ['testVar']), 
    ...
  },
  ...
}

не работает

1 Ответ

0 голосов
/ 27 июня 2019

Я нашел это из проблемы Veux GitHub, похоже, она соответствует вашим потребностям 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)
      })
    })
  }
}

... или, может быть, нам не нужны помощники mapXXX, упомянутые в этом комментарии https://github.com/vuejs/vuex/issues/863#issuecomment-439039257

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