Vue3 Vuex 持久化教程：使用 localStorage 存储状态

在 Vue3 中，可以使用插件来实现 Vuex 的持久化。以下是一个使用 localStorage 来持久化 Vuex 状态的示例：

首先，安装 vuex-persistedstate 插件：

npm install vuex-persistedstate

在 main.js 中导入插件并使用它：

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

const store = createStore({
  // Vuex 的配置
  plugins: [createPersistedState()]
})

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

这样，当页面刷新时，Vuex 的状态将会被自动保存到 localStorage 中，并在下次访问页面时恢复。

你还可以通过传入配置参数来进一步自定义持久化的行为。例如，你可以指定只持久化某些模块的状态，或者在某些特定的 mutation 被触发时清除持久化的状态。具体的配置参数可以参考 vuex-persistedstate 的文档。