How to populate form from store state data returned from vuex with getters?

Question

I have tried to use the same form for creating and for editing purpose. i have passed the id with props from one component to other and it works fine. using that id i have tried to fetch the data from vuex store state with the help of the getters. the getters returned the data correctly. But i can't populate to the form. i have tried the create, computed and mount properties but i does not work.

i have tried to populate the form using mount, create and computed.

i expect the output the form to be populate when i click the edit button but nothing to see in the form.

Template code

<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 Code

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

Store Code

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

skirtle skirtle · Accepted Answer · 2019-06-29T03:39:18

It's a little difficult to give a concrete answer without seeing the store code but you're going to have to wait until the store has finished fetching the data before trying to read it into your form.

Probably the easiest way is to use the Promise returned by fetchIncomeTaxRate. All actions return a Promise when called, even if you don't return one yourself. Make sure you're returning a suitable Promise, i.e. one that doesn't resolve until the data is loaded. If you're loading the data using a library such as axios that supports Promises then this should be very easy, you just need to return the Promise it returns to you.

Once you've returned a suitable Promise you can do something like this:

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

You may want to put in extra code to prevent the form being seen/edited until the relevant data is populated.

An alternative to using Promises would be to use watch to wait for getIncomeTaxRate to change. However it would be difficult to ensure that you only react to exactly the right change.

Update:

Now that you've posted your store code I've tried running your code myself (as close as I could get) and record was updated fine if I used then in the way I outlined above. Most likely this suggests that there's another problem that isn't in the code you've posted. For example, it might be that the data returned from the server isn't in exactly the format you're expecting.

To diagnose further I suggest putting in some console logging. I'd put some in at the top of the then for starters:

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
});

I'd also put some in fetchIncomeTaxRate too:

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);
}

Not only should the logged values be correct but the order of the log messages is important too. The data should be committed before the then is called.

How to populate form from store state data returned from vuex with getters?

1 Answers