vuex刷新后数据丢失，如何永久保存状态避免再次丢失？

本文共计382个文字，预计阅读时间需要2分钟。

导语：在编写Vue项目时，经常需要用到Vuex作为状态管理库来存储数据。但有时我们会发现，存放在Vuex中的数据在刷新页面后会丢失，那么如何解决这个问题呢？以下是一个简单的方法。

1. 使用localStorage或sessionStorage来存储数据。 在Vuex的mutation中，将需要持久化的数据保存到localStorage或sessionStorage中。

javascript// 在mutation中保存数据到localStorageconst mutations={ saveData(state, data) { localStorage.setItem('dataKey', JSON.stringify(data)); }};

2. 在页面加载时，从localStorage或sessionStorage中读取数据。 在页面组件的created钩子中，从localStorage或sessionStorage中读取数据，并将其赋值给Vuex的状态。

javascriptexport default { created() { const savedData=localStorage.getItem('dataKey'); if (savedData) { this.$store.commit('saveData', JSON.parse(savedData)); } }};

3. 在页面刷新时，从localStorage或sessionStorage中读取数据。 在页面组件的mounted钩子中，同样从localStorage或sessionStorage中读取数据，并将其赋值给Vuex的状态。