In my mutation, I am updating the state as follows:
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) {
...
}
The state should now contain an array with an object inside. Checking the state confirms this, and it is displayed in the view.
However, upon reloading the page, everything remains in the state except for the object inside the array. It only shows an empty array in the store:
line_items_attributes:
attribute: "line_items_attributes"
label: "Positionen"
model_class: "expense_line_item"
nested_form: [] // <---- Object is missing
The nested_form is a hashmap provided by the backend, which I convert into an array. line_items_attribute is a property of the object stored in the state. EDIT: However, even without the transformation, the assigned state does not get preserved.
store.js
const store = createStore({
strict: false,
plugins: [createPersistedState()],
modules: {
expense,
invoice
}
});
Calling the action/mutation as follows:
const updateOuter = (event, refreshable, propertyName) => {
store.dispatch('expense/updateOuterValue', ({
refresh: refreshable,
propertyName: propertyName,
value: event.target.checked ? 1 : 0
}))
};
EDIT:
After changing a different value following the mutation call, the nested_form object is retained after the reload.
It appears to work if I invoke the mutation twice... Any thoughts on why this might be happening?