Vuex使用createPersistedState时页面刷新state内nested_form数组变空问题

问题原因 #

1. 核心错误是将异步axios请求直接写在了mutation中。Vuex的mutation设计为仅支持同步操作，vuex-persistedstate插件的持久化逻辑，是在每次mutation同步执行结束后立即触发的。你用await等待接口返回后再修改state时，本次mutation的执行流程已经结束，插件没有监听到这次state变更，因此不会将修改后的form写入本地存储，刷新后自然丢失数据。
2. 之所以修改另一个值、或者调用两次mutation后数据就能保留，是因为第二次mutation是同步执行的，触发了插件的持久化逻辑，此时你之前异步修改完的state已经是正确值，本次序列化存储就会把完整的state写入本地，刷新后就能读取到完整数据。

解决方案 #

把异步请求、数据处理逻辑全部移到action中，拿到接口返回并完成数据转换后，再调用mutation同步修改state即可，示例代码如下：

// expense模块的action
async function updateOuterValue({ commit }, payload) {
  try {
    const sendForm = {} // 你的请求参数逻辑
    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 ###'
      }
    });

    const obj = cloneDeep(response.data);
    const temp = Object.keys(obj.line_items_attributes.nested_form).map(key => {
      return {
        ...obj.line_items_attributes.nested_form[key]
      }
    });
    obj.line_items_attributes.nested_form = cloneDeep(temp);
    // 调用mutation同步修改state
    commit('SET_EXPENSE_FORM', obj);
  } catch (error) {
    // 错误处理逻辑
  }
}

// expense模块对应的mutation
function SET_EXPENSE_FORM(state, form) {
  state.form = cloneDeep(form);
}

如果调整后仍有问题，可以检查createPersistedState的初始化配置，确认没有过滤掉expense模块的form相关字段，默认配置是全量持久化所有模块数据，无需额外修改。

内容的提问来源于stack exchange，提问作者user16732355