Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

138
Views
Vuex state empty after reload

Inside a mutation I'm changing my state like:

try {
  const response = await axios.put('http://localhost:3000/api/mobile/v3/expense/vouchers/form_refresh', sendForm, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      Authorization: 'Bearer ###'
    }
  });

  var obj = cloneDeep(response.data);
  var temp = cloneDeep(response.data.line_items_attributes.nested_form)

  temp = Object.keys(temp).map(key => {
    return {
      ...temp[key]
    }
  });

  obj.line_items_attributes.nested_form = cloneDeep(temp);

  state.form = cloneDeep(obj);
  console.log(state.form);
} catch (error) {
  ...
}

So the state shall hold an array with an object as the entry. Checking the state also shows the same. And it's displayed on the view. When now reloading everything remains inside the state except of the object inside the array. It just shows an empty array inside the store:

line_items_attributes:
  attribute: "line_items_attributes"
  label: "Positionen"
  model_class: "expense_line_item"
  nested_form: []              // <---- Object is gone

Nested_form is a hahsmap delivered by the backend. I just turn it to an array. line_items_attribute is a property of the object stored in the state. EDIT: But it's also not working without the transformation. The assigned state there just doesn't get preserved.

store.js

const store = createStore({
    strict: false,
    plugins: [createPersistedState()],
    modules: {
        expense,
        invoice
    }
});

Calling the action/mutation like:

const updateOuter = (event, refreshable, propertyName) => {
   store.dispatch('expense/updateOuterValue', ({
      refresh: refreshable,
      propertyName: propertyName,
      value: event.target.checked ? 1 : 0
   }))
};

EDIT:

When changing a different value after calling the mutation the nested_form object is being preserved after the reload.

It seems to work if I call the mutation twice... Any idea how this could be?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

The problem was the execution of axios inside the mutation. There must be no asynchronous calls inside a Vuex mutation. As suggested by @e200

You shouldn't do async operations inside mutations, use actions instead.

So it's more than just a best practice, rather a must do. Explianed here: mutations must be synchronous

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!