Javascript 映射到命名空间模块时将prop作为模块名传递

我试图通过props将存储模块名称空间传递给组件。当我尝试用道具映射到getter时，它会抛出这个错误

未捕获类型错误：无法将未定义或null转换为对象

如果我将名称作为字符串传递，它将起作用

这很有效

<script>
export default {

  props: ['store'],

  computed: {
    ...mapGetters('someString', [
      'filters'
    ])
  }
}
</script>

导出默认值{
道具：[“商店”]，
计算：{
…映射器（'someString'[
“过滤器”
])
}
}

这不起作用

此.store已定义
this.store typeof是一个字符串

<script>
  export default {

    props: ['store'],

    computed: {
      ...mapGetters(this.store, [
        'filters'
      ])
    }
  }
</script>

导出默认值{
道具：[“商店”]，
计算：{
…mapGetters（this.store[
“过滤器”
])
}
}

您遇到的错误是在Vue/Vuex的初始化过程中抛出的，

此.store无法转换，因为它尚不存在。我还没有使用名称空间，这是未经测试的，所以我不知道它是否有效，但您可以通过使用这样的中介来解决此问题：

<script>
  export default {

    props: ['store'],

    data {
        namespace: (this.store !== undefined) ? this.store : 'null',
    },

    computed: {
      ...mapGetters(this.namespace, [
        'filters'
      ])
    }
  }
</script>


导出默认值{
道具：[“商店”]，
资料{
命名空间：（this.store！==未定义）？this.store:'null'，
},
计算：{
…映射获取程序（this.namespace[
“过滤器”
])
}
}

如果
this.store
未定义，则该三元表达式将返回一个字符串，如果未定义，则它将返回
this.store
中的值。我也解决了几个小时的问题。然后我终于想出了一个主意


在子vue组件中添加
attachStore
函数。nama的功能并不重要。除vue保留字外，任何名称都可以

export default {
  :
  attachStore (namespace) {
    Object.assign(this.computed, mapGetters(namespace, ['filters']))
  }
}


导入此vue组件时，使用namespace参数调用
attachStore
。然后在父组件属性中使用它

import Child from './path/to/child'

Child.attachStore('someStoresName')

export default {
  name: 'parent',
  components: { Child }
  :
}


请注意，在Vue的Github页面上也有关于此的讨论：

在Vue正式支持之前，我替换了以下内容

...mapState({
  foo: state => state.foo
})

与

其中，
名称空间
使用一个道具传递给我的子组件：

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

我使用这种风格，利用beforeCreate访问您想要的变量，我使用传递到组件实例的道具：

从“vuex”导入{createNamespacedHelpers}；
从“@/store/modules/mymod”导入模块；
导出默认值{
名称：“someComponent”，
道具：['namespace']，
beforeCreate（）{
让namespace=this.$options.propsData.namespace；
const{mapActions，mapState}=createNamespacedHelpers（名称空间）；
//先注册你的模块
这个.store.registerModule（名称空间，模块）；
//现在createNamespacedHelpers可以使用道具，我们现在可以使用更整洁的映射
这是。$options.computed={
…地图状态({
name:state=>state.name，
description:state=>state.description
}),
//因为我们使用上面的扩展运算符，所以仍然可以添加组件细节
AffunctionComputed（）{返回this.name+“functions”；}，
anArrowComputed:（）=>“${this.name}箭头”，
};
//通过$options变量设置方法绑定
此项。$options.methods={
…映射操作（[“initialiseModuleData”]）
};
},
创建（）{
//如果需要，在第一个参数中调用传递有效负载的操作
this.initialiseModuleData（{id:123，名称：“Tom”}）；
}
}

我个人在导入的模块中使用了一个helper函数来获取名称空间，因此，如果我让模块存储项目，并使用路由器和/或道具将projectId 123传递给我的组件/页面，它将如下所示：

<script>
  export default {

    props: ['store'],

    data {
        namespace: (this.store !== undefined) ? this.store : 'null',
    },

    computed: {
      ...mapGetters(this.namespace, [
        'filters'
      ])
    }
  }
</script>

从“vuex”导入{createNamespacedHelpers}；
从“@/store/project.module”导入项目模块；
导出默认值{
道具['projectd']，//例如123
...
beforeCreate（）{
//使用所需的任何模块构建动态命名空间：
让namespace=projectModule.buildNamespace（this.$options.propsData.projectId）；/“project:123”
//…其他一切如上所述，无需到处丢弃名称空间
这是。$options.computed={
…地图状态({
name:state=>state.name，
description:state=>state.description
})
}
}
}

希望您觉得这很有用。
谢谢您的想法，我认为您的思路是正确的，但您的解决方案对我不起作用。我仍然看到相同的错误。这不起作用，似乎传递给
mapGetters
的名称空间只计算了一次，在任何属性可用之前。您是否找到了解决方案？现在我在2020年6月查看我的老问题，看看它是否得到了回答。仍然没有解决方案。也在寻找解决方案。还创建了另一个主题，希望能够获得一些吸引力。您还可以从孩子的
activated（）
调用attachStore，并使用道具将名称空间传递给它。那可能有点像Vue