如何解决Vuex页面刷新数据丢失？

Vue面试题 5月前 0 82

Vuex是一个Vue.js的状态管理模式，它主要用来保存所有组件的共享数据。但是，当我们刷新页面时，Vuex中的数据会被重置，因为Vuex的数据存储在内存中，而非持久化存储。

解决Vuex页面刷新数据丢失的问题，主要有以下几种方法：

localStorage或sessionStorage: 可以使用浏览器的localStorage或sessionStorage来存储数据。在Vuex的mutation中，每次更改状态后，将状态保存到localStorage或sessionStorage中。然后在页面加载时，再从localStorage或sessionStorage中恢复状态。
```
// 在store中
const store = new Vuex.Store({
 state: {
   user: JSON.parse(window.localStorage.getItem('user')) || {}
 },
 mutations: {
   setUser(state, payload) {
     state.user = payload.user;
     window.localStorage.setItem('user', JSON.stringify(payload.user));
   }
 }
})
```
Vuex持久化插件: 例如vuex-persistedstate。这个插件会将你的vuex数据保存到localStorage或者sessionStorage中，实现数据持久化。
```
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
});
```
Cookies: 如果你的应用需要在服务端渲染(SSR)，那么你可能需要将数据存储在cookies中，因为localStorage和sessionStorage在服务端是无法获取的。

以上三种方式都可以解决Vuex刷新页面数据丢失的问题，可以根据你的具体需求选择合适的方式。