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

Posted 2023-02-22

【中文标题】映射到命名空间模块时将 prop 作为模块名称传递

【英文标题】：Pass prop as module name when mapping to namespaced module

【发布时间】：2017-07-23 22:16:28

【问题描述】：

我正在尝试通过 props 将 store 模块命名空间传递给组件。当我尝试使用道具映射到吸气剂时，它会引发此错误，

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

如果我将名称作为字符串传递，它可以工作。

这可行

<script>
export default 

  props: ['store'],

  computed: 
    ...mapGetters('someString', [
      'filters'
    ])
  

</script>

这不起作用

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

<script>
  export default 

    props: ['store'],

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

【问题讨论】：

你找到解决方案了吗？

2020 年 6 月，我在这里查看我的旧问题，看看它是否得到了回答。仍然没有解决方案。

也在寻找解决方案。还创建了另一个主题以希望得到一些关注***.com/questions/64287347/…

【参考方案1】：

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

import  createNamespacedHelpers  from "vuex";
import module from '@/store/modules/mymod';

export default 
  name: "someComponent",
  props: ['namespace'],
  beforeCreate()  
    let namespace = this.$options.propsData.namespace;
    const  mapActions, mapState  = createNamespacedHelpers(namespace);

    // register your module first
    this.$store.registerModule(namespace, module);

    // now that createNamespacedHelpers can use props we can now use neater mapping
    this.$options.computed = 
      ...mapState(
        name: state => state.name,
        description: state => state.description
      ),

      // because we use spread operator above we can still add component specifics
      aFunctionComputed() return this.name + "functions";,
      anArrowComputed: () => `$this.namearrows`,
    ;

    // set up your method bindings via the $options variable
    this.$options.methods = 
      ...mapActions(["initialiseModuleData"])
    ;
  ,

  created() 
    // call your actions passing your payloads in the first param if you need
    this.initialiseModuleData( id: 123, name: "Tom" );
  

我个人在要导入的模块中使用辅助函数来获取命名空间，所以如果我让我的模块存储项目并使用路由器和/或道具将 123 的 projectId 传递给我的组件/页面，它看起来像这样：

import  createNamespacedHelpers  from "vuex";
import projectModule from '@/store/project.module';

export default
  props['projectId'], // eg. 123
  ...
  beforeCreate() 

    // dynamic namespace built using whatever module you want:
   let namespace = projectModule.buildNamespace(this.$options.propsData.projectId); // 'project:123'

   // ... everything else as above with no need to drop namespaces everywhere
   this.$options.computed = 
      ...mapState(
        name: state => state.name,
        description: state => state.description
      )
   
  

希望你觉得这很有用。

【参考方案2】：

我也解决了这个问题好几个小时。然后我终于想出了一个主意。

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

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

当这个 vue 组件被导入时，使用命名空间参数调用attachStore。然后在父组件属性中使用。

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

Child.attachStore('someStoresName')

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

【讨论】：

您也可以从您孩子的activated() 调用 attachStore 并使用道具将命名空间传递给它。那可能更像 Vue 风格

【参考方案3】：

您遇到的错误是在 Vue/Vuex 的初始化过程中抛出的，this.store 无法转换，因为它还不存在。我还没有使用命名空间，而且这是未经测试的，所以我不知道它是否会起作用，但你可以通过这样的中介来解决这个问题：

<script>
  export default 

    props: ['store'],

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

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

如果this.store 未定义，则该三元表达式将返回一个字符串，如果未定义则它将返回this.store 中的值。

【讨论】：

感谢您的想法，我认为您在正确的轨道上，但您的解决方案对我不起作用。我仍然看到同样的错误。

那行不通，似乎传递给mapGetters 的命名空间只被评估一次，在任何属性可用之前

【参考方案4】：

请注意，Vue 的 Github 页面上也有关于此的讨论：https://github.com/vuejs/vuex/issues/863

在 Vue 正式支持它之前，我替换了类似的东西

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

与

foo () 
  return this.$store.state[this.namespace + '/foo'] || 0

namespace 使用 prop 传递给我的子组件：

props: 
  namespace:  type: String, required: true