vue3 vuex储存的值刷新后消失

在Vue3中，Vuex用于管理和共享应用的状态数据。如果在刷新页面后，储存在Vuex中的值消失，那是因为Vuex的数据是存储在内存中的，刷新页面会重新加载应用，导致之前保存的数据被清空。

要解决这个问题，可以通过将Vuex的数据保存到本地存储或使用其他持久化方式来实现数据的持久化。以下是一种可行的方法：

1. 在Vue3项目中安装并导入`vuex-persistedstate`插件。

npm install vuex-persistedstate

2. 在项目的入口文件(main.js)中引入Vuex和`vuex-persistedstate`插件。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import App from './App.vue'

const store = createStore({
  // 定义和配置Vuex store
  // ...
  plugins: [createPersistedState()] // 使用vuex-persistedstate插件
})

const app = createApp(App)
app.use(store)
app.mount('#app')

通过使用`vuex-persistedstate`插件，Vuex中的数据将自动保存到浏览器的本地存储（`localStorage`或`sessionStorage`）中。当页面刷新后，数据会从本地存储中恢复回来，保持之前的状态。

注意：需要确保浏览器支持本地存储功能，否则数据仍然会在刷新后消失。

除了使用`vuex-persistedstate`插件，还有其他的数据持久化方法可以选择，例如手动将Vuex数据序列化并保存到本地存储中，然后在页面加载时重新加载数据。但使用`vuex-persistedstate`插件是一个更简单和方便的方法。