Vuex:具有动态命名空间的 createNamespacedHelpers [英] Vuex: createNamespacedHelpers with dynamic namespace

问题描述

在几乎所有关于 vuex 模块注册的指南、教程、帖子等中，如果模块是由组件注册的，则 createNamespacedHelpers 在 export 之前被导入和定义default 组件语句，例如:

In almost all guides, tutorial, posts, etc that I have seen on vuex module registration, if the module is registered by the component the createNamespacedHelpers are imported and defined prior to the export default component statement, e.g.:

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

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

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

这按预期工作，但是如果我们希望模块具有唯一的或用户定义的命名空间怎么办?

this works as expected, but what if we want the module to have a unique or user defined namespace?

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

我认为这行得通，但行不通.

I thought this would work, but it doesnt.

为什么需要这样的东西?因为

Why is something like this needed? because

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

不起作用

推荐答案

这种通过利用 beforeCreate 来访问你想要的变量的工作方式应该可以工作，我是通过传递给你的组件实例的 props 做到的:

This style of work around by utilising beforeCreate to access the variables you want should work, I did this from the props passed into your component instance:

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

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

I personally use a helper function in the module I'm importing to get a namespace, so if I hadmy module storing projects and passed a projectId of 123 to my component/page using router and/or props it would look like this:

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

希望你觉得这有用.

这篇关于Vuex:具有动态命名空间的 createNamespacedHelpers的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！