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的状态。

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

这样，在页面刷新后，Vuex中的数据就不会丢失了。

导语：

我们在写vue项目的时候，经常要用到vuex作为内存来储存，但是我们存放在vuex中的数据（用户数据，当前页面的数据等等）在刷新后就会丢失，那么如何解决呢？超级简单。

1，安装vuex-persistedstate

npm install --save vuex-persistedstate

2，修改store

import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ state: { user: {}, //用户 }, mutations: { update_user(state, newuser) { state.user = newuser }, }, //把所有数据缓存到本地 plugins: [createPersistedState()], }) export default store;

保存后，再运行程序，刷新后vuex中的数据就不会丢失了。

总结

到此这篇关于vuex刷新后数据丢失解决的文章就介绍到这了,更多相关vuex刷新数据丢失的解决内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！