Vuex-map-fields обновляет несколько магазинов через модули - PullRequest
Новая
       22

Vuex-map-fields обновляет несколько магазинов через модули

0 голосов
/ 28 апреля 2018

Я работаю с модулями Vuex, чтобы заявить о своих данных. Я храню данные в нескольких модулях, чтобы моя база кода была красивой и чистой.

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

Ниже мой текущий код; Мой компонент 

<template>
    <div class="">
        <input type="text" v-model="no_panels"><br>
        <input type="text" v-model="firstName"><br>
        <router-link to="/step-2">Go to step 2</router-link>
    </div>
</template>

<script>
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
    getterType: [
        'getKitchenField',
        'getApplicantField',
    ],
    mutationType: 'updateKitchenField',
});

export default {
    computed: {
        ...mapFields(['no_panels', 'firstName', 'lastName'])
    },
}
</script>

Файл моего магазина 

import kitchen from './kitchen';
import applicant from "./applicant";

export default {
    modules: {
        kitchen: kitchen,
        applicant: applicant
    },
    strict: false
 }

Applicant.js 

import { createHelpers } from 'vuex-map-fields';

const { getApplicantField, updateApplicantField } = createHelpers({
    getterType: 'getApplicantField',
    mutationType: 'updateApplicantField',
});

export default {
    state: {
         firstName: '',
        lastName: ''
    },
    getters: {
        getApplicantField
    },
    mutations: {
        updateApplicantField
    }
}

Приведенный выше код приводит к следующей ошибке:

Ошибка при рендеринге: «Ошибка типа: this. $ Store.getters [getterType] не является функцией»

1 Ответ

0 голосов
/ 02 мая 2018

Я создатель vuex-map-fields, Автор задал тот же вопрос на GitHub :

Вместо передачи нескольких геттеров в createHelpers(), вы можете деструктурировать и переименовать возвращаемое значение createHelpers() и вызвать его дважды. 

const { mapFields: mapKitchenFields } = createHelpers({
  getterType: 'getKitchenField',
  mutationType: 'updateKitchenField',
});
const { mapFields: mapApplicantFields } = createHelpers({
  getterType: 'getApplicantField',
  mutationType: 'updateApplicantField',
});

export default {
  computed: {
    ...mapKitchenFields(['no_panels']),
    ...mapApplicantFields(['firstName', 'lastName']),
  },
}

Если синтаксис синтаксиса является новым для вас, вы можете узнать больше об этом у Уэса Боса: https://wesbos.com/destructuring-renaming/

...