面试题：如何解决页面刷新后 Vuex 的 state 数据丢失的问题？

在 Vue 应用中，页面刷新后 Vuex 的 state 数据会丢失，因为 Vuex 的状态是存储在内存中的。为了解决这个问题，可以采用以下方法：

1. 使用 `localStorage` 或 `sessionStorage`

将 Vuex 的状态持久化到 localStorage 或 sessionStorage 中，页面刷新时再从存储中恢复状态。

实现步骤：

在 Vuex Store 中监听状态变化：每次状态变化时，将状态保存到 localStorage。
页面加载时恢复状态：从 localStorage 中读取状态并更新到 Vuex Store。

示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setState(state, newState) {
      Object.assign(state, newState); // 恢复状态
    },
  },
});

// 监听状态变化，保存到 localStorage
store.subscribe((mutation, state) => {
  localStorage.setItem('vuex-state', JSON.stringify(state));
});

// 页面加载时恢复状态
const savedState = localStorage.getItem('vuex-state');
if (savedState) {
  store.commit('setState', JSON.parse(savedState));
}

export default store;

2. 使用 `vuex-persistedstate` 插件

vuex-persistedstate 是一个 Vuex 插件，可以自动将状态持久化到 localStorage 或 sessionStorage。

安装：

npm install vuex-persistedstate

使用：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  plugins: [createPersistedState()], // 默认使用 localStorage
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default store;

配置：

createPersistedState({
  storage: window.sessionStorage, // 使用 sessionStorage
  paths: ['count'], // 只持久化 count 状态
});

3. 使用 `vuex-persist` 插件

vuex-persist 是另一个 Vuex 插件，支持更多存储方式（如 localStorage、sessionStorage、IndexedDB 等）。

安装：

npm install vuex-persist

使用：

import VuexPersistence from 'vuex-persist';

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
});

const store = new Vuex.Store({
  plugins: [vuexLocal.plugin],
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

export default store;

4. 使用 Cookie

将状态保存到 Cookie 中，页面刷新时从 Cookie 恢复状态。

示例：

import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setState(state, newState) {
      Object.assign(state, newState);
    },
  },
});

// 监听状态变化，保存到 Cookie
store.subscribe((mutation, state) => {
  Cookies.set('vuex-state', JSON.stringify(state), { expires: 7 }); // 设置过期时间
});

// 页面加载时恢复状态
const savedState = Cookies.get('vuex-state');
if (savedState) {
  store.commit('setState', JSON.parse(savedState));
}

export default store;

5. 使用服务端渲染（SSR）

在服务端渲染（SSR）应用中，状态可以在服务端初始化并注入到 HTML 中，页面加载时直接从 HTML 中恢复状态。

示例：

// 服务端
const state = store.state;
const html = `
  <script>
    window.__INITIAL_STATE__ = ${JSON.stringify(state)};
  </script>
`;

// 客户端
const store = new Vuex.Store({
  state: window.__INITIAL_STATE__ || {},
});

6. 结合 IndexedDB

对于需要存储大量数据的场景，可以使用 IndexedDB 持久化状态。

示例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setState(state, newState) {
      Object.assign(state, newState);
    },
  },
});

// 监听状态变化，保存到 IndexedDB
store.subscribe((mutation, state) => {
  const request = indexedDB.open('vuex-store', 1);
  request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('state', 'readwrite');
    const store = transaction.objectStore('state');
    store.put(state, 'vuex-state');
  };
});

// 页面加载时从 IndexedDB 恢复状态
const request = indexedDB.open('vuex-store', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('state', 'readonly');
  const store = transaction.objectStore('state');
  const getRequest = store.get('vuex-state');
  getRequest.onsuccess = (event) => {
    const savedState = event.target.result;
    if (savedState) {
      store.commit('setState', savedState);
    }
  };
};

export default store;