app首次加载vuex数据丢失

当应用程序首次加载时，Vuex存储的数据将被重置为其初始值，这是因为Vuex存储的数据是在内存中保存的，而不是在本地存储中保存的。为了避免这种情况，我们可以使用浏览器的本地存储来缓存Vuex数据，以便在页面刷新后可以恢复数据。

以下是一个简单的示例，演示如何使用浏览器的本地存储来缓存Vuex数据：

// 在store中添加以下代码
const store = new Vuex.Store({
  // ...
  plugins: [
    // 将Vuex数据缓存到浏览器的本地存储中
    (store) => {
      // 当store初始化时从本地存储中获取状态数据
      if (localStorage) {
        const localData = localStorage.getItem("store");
        if (localData) {
          store.replaceState(JSON.parse(localData));
        }
      }

      // 当store发生变化时将数据存储到本地存储中
      store.subscribe((mutation, state) => {
        if (localStorage) {
          localStorage.setItem("store", JSON.stringify(state));
        }
      });
    },
  ],
});

在上面的代码中，我们使用了Vuex的插件机制来实现数据的本地存储。在插件中，我们首先从本地存储中获取状态数据，并将其替换为store的初始状态。然后，我们订阅store的变化事件，并将store的状态数据存储到本地存储中。