Question

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

2017-03-03

2673

javascript vue.js vuejs2 vue-component vuex

我尝试通过 props 将 store 模块命名空间传递给组件。当我尝试使用 prop 映射到 getter 时，它会抛出此错误，

Uncaught TypeError：无法将 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>

Answer 1

我使用这种样式利用 beforeCreate 来访问您想要的变量，我使用传递到组件实例中的 props：

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.name}arrows`,
    };

    // 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" });
  }
}

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

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

希望您觉得这有用。

Answer 2

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

在子 vue 组件中添加 attachStore 函数。函数名称并不重要。除了 vue 保留字之外，任何名称都可以。
```
export default {
:
attachmentStore (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 }
:
}

Answer 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 中的值。