Как заполнить форму из данных о состоянии магазина, возвращаемых из vuex, с помощью геттеров?

Question

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

Я попытался заполнить форму, используя mount, create и computed.

Я ожидаю, что вывод формы будет заполнен, когда я нажму кнопку редактирования, но в форме ничего не видно.

Код шаблона

<template>
    <b-form-group
    label-cols="12"          
    label="Minimum Salary: "
    >
        <b-form-input
              id="input-1"
              v-model="record.min_salary"
              type="number"
            ></b-form-input>
    </b-form-group>

          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Maximum Salary: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.max_salary"
              type="number"
            ></b-form-input>
          </b-form-group>

          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Tax Rate: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.tax_rate"
              type="number"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Deductible: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.deductible"
              type="number"
            ></b-form-input>
          </b-form-group>
          </b-form>
    </template>

Код сценария Vue

<script>
    import { mapGetters, mapActions } from "vuex";
    export default {
      props: ["id"],
      data: () => ({
      update: false,
        record: {
          min_salary: "",
          max_salary: "",
          tax_rate: "",
          deductible: ""
       }
      }),

      created() {
        if (this.id != null) {
          this.update = true;
          this.fetchIncomeTaxRate(this.id);
          this.createoredit = "EDIT";
        }
      },
      mounted() {
         if (this.id != null) {
          this.record.min_salary = this.getIncomeTaxRate.min_salary;
          this.record.max_salary = this.getIncomeTaxRate.max_salary;
          this.record.tax_rate = this.getIncomeTaxRate.tax_rate;
          this.record.deductible = this.getIncomeTaxRate.deductible;
       }
      },
      methods: { ...mapActions(["fetchIncomeTaxRate"])},
      computed: {...mapGetters(["getIncomeTaxRate"])}
     };
</script>

Код магазина

import axios from "axios";
import commonAPI from "../commonAPI";

const state = {
  incomeTaxRate: []
};

const mutations = {

  setIncomeTaxRate: (state, incomeTaxRate) =>
    (state.incomeTaxRate = incomeTaxRate)
};

const getters = {
  getIncomeTaxRate: state => {
    return state.incomeTaxRate;
  }
};

const actions = {
  async fetchIncomeTaxRate({ commit }, id) {
    const response = await axios.get(
      commonAPI.PAYROLL_BASE_URL + `/income-tax-rates/${id}`
    );
    commit("setIncomeTaxRate", response.data);
  }
};

export default {
  state,
  mutations,
  getters,
  actions
};

Answer 1

Немного сложно дать конкретный ответ, не видя код магазина, но вам придется подождать, пока магазин закончит выборку данных, прежде чем пытаться прочитать их в вашей форме.

Возможносамый простой способ - использовать обещание, возвращенное fetchIncomeTaxRate.Все actions возвращают обещание при вызове, даже если вы сами его не возвращаете.Убедитесь, что вы возвращаете подходящее обещание, то есть такое, которое не разрешается до тех пор, пока данные не будут загружены.Если вы загружаете данные с помощью библиотеки, например axios, которая поддерживает Promises, это должно быть очень просто, вам просто нужно вернуть Promise, который он вам возвращает.

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

this.fetchIncomeTaxRate(this.id).then(() => {
    this.record.min_salary = this.getIncomeTaxRate.min_salary;
    // ... others here
});

Возможно, вы захотите добавить дополнительный код, чтобы предотвратить просмотр / редактирование формы до заполнения соответствующих данных.

Альтернативой использованию Promises будетиспользовать watch для ожидания изменения getIncomeTaxRate.Однако было бы сложно гарантировать, что вы реагируете только на правильные изменения.

Обновление:

Теперь, когда вы опубликовали код своего магазина, я попробовалЯ сам запустил ваш код (настолько близко, насколько смог), и record обновился нормально, если я использовал then, как я описал выше.Скорее всего, это говорит о том, что есть другая проблема, которой нет в опубликованном вами коде.Например, может случиться так, что данные, возвращаемые с сервера, будут не в том формате, в котором вы ожидаете.

Для дальнейшей диагностики я предлагаю добавить некоторые записи в консоли.Я бы положил некоторые в верхнюю часть then для начала:

this.fetchIncomeTaxRate(this.id).then(() => {
    console.log('in then', this.getIncomeTaxRate, this.getIncomeTaxRate.min_salary);

    this.record.min_salary = this.getIncomeTaxRate.min_salary;
    // ... others here
});

Я бы также добавил некоторые в fetchIncomeTaxRate тоже:

async fetchIncomeTaxRate({ commit }, id) {
  console.log('called fetchIncomeTaxRate');

  const response = await axios.get(
    commonAPI.PAYROLL_BASE_URL + `/income-tax-rates/${id}`
  );
  commit("setIncomeTaxRate", response.data);

  console.log('committed', response.data);
}

Не только должензарегистрированные значения будут правильными, но порядок сообщений журнала также важен.Данные должны быть зафиксированы до вызова then.