네임슬레이드 모듈에 매핑할 때 프로펠을 모듈 이름으로 전달합니다.

네임슬레이드 모듈에 매핑할 때 프로펠을 모듈 이름으로 전달합니다.

스토어 모듈 네임스페이스를 소품을 통해 컴포넌트에 전달하려고 합니다.소품으로 게터를 매핑하려고 하면 오류가 발생합니다.

수집되지 않은 유형 오류: 정의되지 않았거나 null을 개체로 변환할 수 없습니다.

이름을 문자열로 전달하면 됩니다.

이 동작

<script>
export default {

  props: ['store'],

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

이것은 동작하지 않는다.

this.store가 정의되어 있습니다.
this.store type of은 문자열입니다.

<script>
  export default {

    props: ['store'],

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

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

저는 네임스페이스를 얻기 위해 개인적으로 Import하는 모듈에서 도우미 기능을 사용하기 때문에 모듈을 사용하여 프로젝트를 저장하고 라우터 및/또는 소품을 사용하여 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
      })
   }
  }
}

유용하게 쓰시길 바랍니다.

나도 몇 시간 동안 이 문제에 몰두했다.그러다가 드디어 한 가지 아이디어가 떠올랐어.

• 더하다attachStore하위 vue 구성 요소에서 작동합니다.함수 nama는 중요하지 않습니다.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 }
    :
  }
  

발생한 오류는 Vue/Vuex 초기화 프로세스 중에 발생합니다.this.store아직 존재하지 않기 때문에 변환할 수 없습니다.아직 네임스페이스를 사용할 필요가 없습니다.또한 아직 테스트되지 않았기 때문에 동작할지는 모르겠지만, 다음과 같은 중개자가 있으면 이 문제를 해결할 수 있을 것입니다.

<script>
  export default {

    props: ['store'],

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

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

이 3진 표현은 다음 경우에 문자열을 반환합니다.this.store정의되어 있지 않습니다.정의되어 있지 않은 경우는, 다음의 값이 반환됩니다.this.store.

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소품을 사용하여 자녀 구성 요소에 전달됩니다.

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

언급URL : https://stackoverflow.com/questions/42585055/pass-prop-as-module-name-when-mapping-to-namespaced-module