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
    }
 }
 ...

但是我得到了错误：

无法读取未定义的属性'namespace'

有什么想法吗？

最初是从“ 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)
      })
    })
  }
}

Answer 2

我基本上在制作动态吸气剂时遇到了完全相同的问题，由于某种原因，您无法使用组件中的数据变量来执行vuex映射函数。

所以这对我不起作用

 ...mapGetters( this.layout,['getFilterByObject'])

但是我可以做到

this.$store.getters[this.layout + '/getFilterByObject'](filterGroup)

也许你可以做某事。与您的状态相似，但我没有进行测试

this.$store.state[this.namespace].filter

Answer 3

另一种解决方法可能是利用以下事实：在数据属性之后初始化计算的属性。不过，这仅适用于计算的属性-因为方法是在数据之前计算的。

一个例子：

export default {
  props: {
    namespace: {
      type: String,
      required: true
    },
  },
  data(){
    // Append more computed properties before they are initialized.
    this.$options.computed = {
      ...this.$options.computed,
      ...mapState(this.namespace, ['filter'])
    }

    return {
      foo: bar
    }
  },

}

Vuex-绑定助手中的动态名称空间（mapState，...）

3 个答案: