programing

Vuex: 기능 범위 모듈의 알 수 없는 Getter

kingscode 2022. 8. 18. 21:36
반응형

Vuex: 기능 범위 모듈의 알 수 없는 Getter

Vuex 스토어를 '기능 범위 구조'로 처음 사용하고 있는데 왜 Vuex 스토어가 표시되는지 추적하는 데 어려움을 겪고 있습니다.[vuex] unknown getter: $_kp/kp(Vue/Vuex는 인용된 오류 이외에는 별로 중요하지 않습니다).

업데이트: 켰습니다.store.subscribeAction()더 이상의 정보를 포기하는지 보려고요여기 인쇄된 로그가 있습니다(이러한 정보는 없습니다만, 도움이 되었으면 합니다).

액션 유형: $_kp/getKp색인

액션 페이로드: 정의되지 않음

현재 상태: {ob: Observer} $_kp: 객체 kp: "2" //<- 이것이 내가 얻으려고 하는 것입니다. - "2"!

UPDATE-2: 현재 Vues Inspector도 사용하고 있습니다.다음 내용이 표시됩니다.

| State
| - $_kp: object
  | - kp: "3"

| Mutation
| - payload: "3"
| - type: "$_kp/KP_DATA_UPDATED"

어떤 도움이라도 주셔서 대단히 감사드리며, 이러한 방식으로 가게를 차리는 분들에게 도움이 되었으면 합니다.

어떤 요소.vue:

<script>
import {mapGetters} from 'vuex';
import store from '../_store';

export default {
  name  : 'KpIndexElement',
  parent: 'AVWX',

  computed: {
    ...mapGetters({
      kp: '$_kp/kp', //<-- HERE?
    }),
  },

  created() {
    const STORE_KEY = '$_kp';
    if (!(STORE_KEY in this.$store._modules.root._children)) {//<= I think there is an issue with this too
      this.$store.registerModule(STORE_KEY, store);
    }
  },

  mounted() {
    this.$store.dispatch('$_kp/getKpIndex');
  },
}
</script>

<template>
  <p><strong>Kp: </strong>{{ kp }}</p>
</template>

스토어index.js

import actions      from './actions';
import getters      from './getters';
import mutations    from './mutations';

var state = {
    kp: '',
};

export default {
    namespaced: true,
    state,
    actions,
    getters,
    mutations,
};

actions.syslog:

import api from '../_api/server';

const getKpIndex = (context) => {
  api.fetchKpData
  .then((response) => {
    console.log('fetch response: ' + response)
    context.commit('KP_DATA_UPDATED', response);
  })
  .catch((error) => {
    console.error(error);
  })
}

export default {
  getKpIndex,
}

돌연변이.복제

const KP_DATA_UPDATED = (state, kp) => {
  state.kp = kp;
}

export default {
  KP_DATA_UPDATED,
}

...그리고 마지막으로getters.js

const kp = state => state.kp;

export {
  kp,
};

의 구문mapGetters네임스페이스를 사용하는 경우는 다음과 같습니다.

...mapGetters('namespace', [
    'getter1',
    'getter2',
    ... // Other getters 
])

고객님의 경우:

...mapGetters('$_kp', [
    'kp'
])

첫 번째 인수는 네임스페이스이고 두 번째 인수는 사용할 getter를 포함하는 payload입니다.

또, @ijubadr의 코멘트에도 기재되어 있습니다만, 잘 모르겠습니다.mapGetters를 등록한 후에 평가됩니다.store모듈.그 문제를 해결하려면 , 의 사용을 중지하는 것이 좋을지도 모릅니다.mapGetters선언을 하다STORE_KEY데이터를 사용하여 계산된 getter를 정의합니다.STORE_KEY정의상 (이름을 변경했습니다.storeKey이 값은 상수가 아니기 때문에 아래 예에서는 다음과 같습니다.

computed: mapState('$_kp',{
  kpIndex: 'kp'
}),

created() {
  this.storeKey = '$_kp';
  if (!(this.storeKey in this.$store._modules.root._children)) {
    this.$store.registerModule(this.storeKey, store);
  }
},

mounted() {
  this.$store.dispatch('$_kp/getKpIndex');
}

언급URL : https://stackoverflow.com/questions/54317243/vuex-unknown-getter-in-a-feature-scoped-module

반응형