Vuex: неизвестный метод получения в функционально-функциональном модуле - PullRequest
Новая
       36

Vuex: неизвестный метод получения в функционально-функциональном модуле

0 голосов
/ 23 января 2019

Я впервые использую магазины Vuex в «структуре объема возможностей», и у меня возникают трудности с отслеживанием, почему я получаю [vuex] unknown getter: $_kp/kp - (Vue / Vuex с этим не тратит много силкроме только указанной ошибки).

ОБНОВЛЕНИЕ : Я включил store.subscribeAction(), чтобы посмотреть, не дает ли это больше информации.Вот распечатанный журнал (я не вижу в этом ничего полезного, но, надеюсь, он вам поможет).

Тип действия: $ _kp / getKpIndex

Полезная нагрузка действия: не определено

Текущее состояние: { ob : Наблюдатель} $ _kp: Объект kp: "2" // <- Это то, что я пытаюсь получить - "2"! </p>

ОБНОВЛЕНИЕ-2: Я также использую Vues Inspector, и он показывает следующее: 

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

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

Любая помощь с этим очень ценится, и я надеюсь, что это может бытьполезно для тех, кто устанавливает свои магазины таким образом.

SomeElement.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>

The Store 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.js: 

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

mutations.js 

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

export default {
  KP_DATA_UPDATED,
}

... и, наконец,getters.js

const kp = state => state.kp;

export {
  kp,
};

1 Ответ

0 голосов
/ 23 января 2019

Синтаксис для mapGetters при использовании пространств имен выглядит следующим образом: 

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

В вашем случае: 

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

Первый аргумент - это пространство имен, второй - полезная нагрузка, содержащаягеттеры, которые вы хотите использовать.

Кроме того, как отмечено в комментариях @Ijubadr, я не уверен, что mapGetters оценивается после того, как вы зарегистрировали свой модуль store.Чтобы обойти это, вам, возможно, придется отказаться от использования mapGetters и объявить свой STORE_KEY как данные, а затем определить вычисляемый метод получения, используя 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');
}
...