重新加载后Vuex状态为空答案

【问题标题】：Vuex state empty after reload重新加载后Vuex状态为空
【发布时间】：2021-10-26 06:49:24
【问题描述】：

在一个突变中，我正在更改我的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 对象在重新加载后被保留。

如果我两次调用突变似乎可以工作...知道这是怎么回事吗？

【问题讨论】：

您不应该在突变内部进行异步操作，而是使用操作。
@e200 这会是一个原因吗？
您的 vuexpersistatedstate 设置看起来如何？并用 line_items_attribues 澄清更多关于该部分的内容，是嵌套对象还是您的状态或什么？提供有关如何设置的更多信息。
要回答有关突变的问题，不，如果一切正常，这不是原因，但这是一种常见的最佳实践，可能是您的其他设置。
@Dejan.S persistedState 只是作为插件包含在我的状态文件中。它适用于所有其他州，所以这不是问题。我会做一个编辑。

标签： javascript vue.js vuex

【解决方案1】：

问题是在突变中执行 axios。必须在 Vuex 突变中没有异步调用。正如@e200 建议的那样

您不应该在突变中执行异步操作，而是使用操作。

因此，这不仅仅是最佳实践，而是必须要做的事情。在这里解释：mutations must be synchronous

【讨论】：