如何使用getter从vuex返回的存储状态数据填充表单？

Question

我试着用同样的形式来创作和编辑。我用道具将id从一个组件传递到另一个组件，它工作得很好。使用该id，我尝试在getter的帮助下从vuex存储状态获取数据。getters正确地返回数据。但我不能按表格填充。我尝试过创建、计算和挂载属性，但是我没有工作。

我尝试使用挂载、创建和计算填充表单。

当我单击“编辑”按钮时，我希望输出表单将被填充，但在表单中看不到任何内容。

模板代码

<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之类的库加载数据，那么这应该非常容易，您只需要将它返回给您的承诺就可以了。

一旦你得到了一个合适的承诺，你就可以这样做：

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

您可能需要添加额外的代码，以防止在填充相关数据之前查看/编辑表单。

使用承诺的另一种替代方法是使用watch等待getIncomeTaxRate更改。然而，很难确保你只对正确的变化做出反应。

更新：

既然您已经发布了存储代码，我已经尝试自己运行您的代码(尽可能接近)，如果我以我前面概述的方式使用then，那么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之前提交数据。