重新加载后Vuex状态为空

Question

在突变中，我正在改变我的state，如:

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) {
...
}

所以state应该保存一个以对象为入口的数组。检查state也显示相同。它显示在视图上。现在重新加载时，除了数组内的对象外，所有内容都保留在state中。它只是在store中显示了一个空数组:

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

Nested_form是一个由后端交付的hahsmap。我把它变成一个数组。Line_items_attribute是存储在状态中的对象的属性。编辑:但是如果没有变换，它也不能工作。赋值状态不会被保留。

store.js

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

像这样调用动作/突变:

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

编辑:

当调用突变后更改不同的值时，nested_form对象在重新加载后被保留。

它似乎工作，如果我调用突变两次…知道这是怎么回事吗?

Answer 1

问题是在突变内部执行axios。有在Vuex突变中没有异步调用。@e200

你不应该在突变内部进行异步操作，而应该使用actions。

所以这不仅仅是一个最佳实践，而是必须要做的。这里解释:突变必须是同步的