保持 Vue 应用状态刷新持久化：使用 Vuex 和 localStorage

       在单页应用中，状态管理是一个常见需求。Vuex 是 Vue 应用程序中进行状态管理的官方库，但它在页面刷新时不会自动保留状态。在本文中，我们将探讨如何通过结合使用 Vuex 和 localStorage/sessionStorage 来实现仅在页面刷新时保持状态的持久化策略。 

步骤 1: 安装 Vuex 持久化插件

首先，我们需要安装 vuex-persistedstate 插件，这是一个帮助我们持久化 Vuex state 的社区插件。

npm install vuex-persistedstate

步骤 2: 配置 Vuex Store

接着，在您的 Vuex store 配置中集成 vuex-persistedstate 插件，并指定使用 localStorage。

// store.js
import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

export default createStore({
  state: {
    // 初始状态
    tabsList: [
      // ...tabs 数据
    ]
  },
  mutations: {
    // 状态变更函数
  },
  plugins: [
    createPersistedState({
      // 指定持久化存储的 key
      key: 'my-app',
      // 指定需要持久化的 state 属性
      paths: ['tabsList'],
      // 选择存储方式为 localStorage
      storage: window.localStorage
    })
  ]
});

步骤 3: 使用持久化的状态

在组件中，您可以正常使用 Vuex state，刷新页面时状态会自动恢复。

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    // 使用持久化的状态
    const tabsList = store.state.tabsList;

    // ...组件逻辑
  }
};
</script>

替代方案

sessionStorage：与 localStorage 类似，但仅在页面会话期间有效。

通俗地讲：localStorage 无论是刷新页面还是重启服务器，状态都还在。

                  sessionStorage 刷新页面状态在，重启服务器状态消失。

// 选择存储方式为 sessionStorage
storage: window.sessionStorage