vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法

在Vue.js应用中，Vuex是一个非常重要的状态管理库，它允许我们在多个组件之间共享和管理数据。然而，当涉及到存储复杂参数，如对象数组等，Vuex在刷新页面后默认会丢失这些状态，因为Vuex的状态只存在于内存中。为了解决这个问题，我们可以结合使用Vuex与浏览器的`sessionStorage`，这样即使页面刷新，数据也不会丢失。 我们需要在Vuex的`mutations`中设置状态。当接收到新的搜索结果时，我们不仅将结果保存到Vuex的state，还将其序列化（使用`JSON.stringify`）并存储到`sessionStorage`中： ```javascript // mutations.js export default { setResultValue(state, flag) { sessionStorage.setItem("resultValue", JSON.stringify(flag)); state.resultValue = flag; } }; ``` `sessionStorage`只能存储字符串，所以我们将对象数组转换成字符串形式。`JSON.stringify`的作用就是将JavaScript对象转换为JSON字符串。 然后，在`getters`中，我们需要从`sessionStorage`恢复数据，并将其设置回Vuex的state： ```javascript // getters.js export default { getResultValue(state) { let resultValue = sessionStorage.getItem("resultValue"); if (resultValue) { state.resultValue = JSON.parse(resultValue); } return state.resultValue; } }; ``` 在这里，我们使用`JSON.parse`将`sessionStorage`中的字符串还原为JavaScript对象，以便在Vuex的state中使用。 在需要获取这些数据的新页面中，我们通过Vuex的getter来访问并处理这个数据： ```javascript // 新页面的Vue组件 import { mapGetters } from "vuex"; export default { computed: { ...mapGetters(["getResultValue"]), resultValue() { return JSON.parse(this.getResultValue); }, }, }; ``` 在这个新页面中，我们使用了`mapGetters`来映射Vuex的getter，然后在`resultValue`计算属性中解析这个值，确保它是可操作的对象数组。 通过这种方式，即使页面被刷新，我们仍然能够从`sessionStorage`中恢复之前存储的复杂参数，保持用户的状态。这不仅解决了数据丢失的问题，也保证了用户体验的一致性。这种方法虽然有效，但也要注意，`sessionStorage`的数据是与浏览器窗口相关的，如果在不同的浏览器窗口或标签页间切换，这些数据不会共享。另外，`sessionStorage`的数据大小有限制，通常为5MB，因此对于非常大的数据集，可能需要考虑其他持久化策略。