Vuex: create Namesched동적 네임스페이스를 사용하는 도우미

Vuex: create Namesched동적 네임스페이스를 사용하는 도우미

등록에 모든 포스트 등에서 되어 있는 vuex 모듈 등록, 튜토리얼, 입니다.createNamespacedHelpers됩니다.export default포넌컴 §:

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

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

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

이것은 예상대로 동작합니다만, 모듈에 일의 또는 사용자 정의의 네임스페이스를 갖게 하려면 어떻게 해야 할까요?

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

이게 먹힐 줄 알았는데 안 되네.

왜 이런 게 필요하죠?왜냐면

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

동작하지 않다

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에 projectId라우터 및/또는 소품을 사용하여 구성 요소/페이지에 123을 표시합니다.

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

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

게시된 모든 답변은 사람들이 상점을 다룰 때 흔히 사용하는 표준 코드로부터 벗어나 장황하게 느껴지는 코드로 이어지는 회피책일 뿐이다.

싶었어요brophdawg11(이슈 #863에 대한 코멘트 담당자의 1명)이 작성(및 오픈소스)된 일련의mapInstanceXXX 이 문제를 해결하는 것을 목표로 하는 도우미들.

그 배경에 대해 설명하는 블로그 투고도 3건이나 있습니다.잘 읽었어요...

veux github에서 발견했는데, 당신의 요구에 맞는 것 같습니다.https://github.com/vuejs/vuex/issues/863#issuecomment-329510765

{
  props: ['namespace'],

  computed: mapState({
    state (state) {
      return state[this.namespace]
    },
    someGetter (state, getters) {
      return getters[this.namespace + '/someGetter']
    }
  }),

  methods: {
    ...mapActions({
      someAction (dispatch, payload) {
        return dispatch(this.namespace + '/someAction', payload)
      }
    }),
    ...mapMutations({
      someMutation (commit, payload) {
        return commit(this.namespace + '/someMutation', payload)
      })
    })
  }
}

또는 이 코멘트에 기재되어 있는 mapXXX 도우미는 필요 없습니다.https://github.com/vuejs/vuex/issues/863#issuecomment-439039257

computed: {
    state () {
      return this.$store.state[this.namespace]
    },
    someGetter () {
      return this.$store.getters[this.namespace + '/someGetter']
    }
  },

언급URL : https://stackoverflow.com/questions/54593910/vuex-createnamespacedhelpers-with-dynamic-namespace