vue3使用vuex持久化

Vuex是Vue.js官方的状态管理库，它允许我们在应用程序中共享和管理状态。在Vue 3中，Vuex仍然是一个很好的选择，它可以通过插件vuex-persistedstate实现状态的持久化。

使用vuex-persistedstate插件，我们可以将Vuex状态存储在localStorage中，这意味着当用户重新加载网页时，状态将被保留。以下是使用vuex-persistedstate插件来实现Vuex状态持久化的示例：

1. 安装vuex-persistedstate插件：

npm install vuex-persistedstate

2. 在Vuex store中导入vuex-persistedstate插件并将其添加到Vuex store中：

import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

3. 配置vuex-persistedstate插件：

createPersistedState({
  key: 'my-app', // 存储的键名
  storage: localStorage // 存储方式，默认为localStorage
})

通过以上步骤，我们就可以实现Vuex状态的持久化了。值得注意的是，如果我们需要存储敏感信息，应该使用sessionStorage而不是localStorage。另外，我们还可以通过配置白名单或黑名单来选择要存储的具体状态。