vue3 vuex 数据持久化 请给我一个完整示例

好的，下面是一个完整的示例，演示如何使用 vuex-persistedstate 库实现 Vuex 数据的持久化：

1. 创建一个 Vue3 项目，并安装 vuex 和 vuex-persistedstate 库：

vue create my-app
cd my-app
npm install vuex vuex-persistedstate

2. 在 src 目录下创建一个 store 目录，并在其中创建一个 index.js 文件：

import { createStore } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
  plugins: [
    createPersistedState({
      storage: window.localStorage,
    }),
  ],
});

export default store;

以上代码中，我们创建了一个名为 `store` 的 Vuex Store，并在其中定义了一个 `count` 状态和两个变更方法 `increment` 和 `decrement`。我们还在 `plugins` 选项中引入了 `createPersistedState`，并配置了 `storage` 选项为 `window.localStorage`，表示将数据存储到 localStorage 中。

3. 在 App.vue 文件中使用 Vuex Store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: mapState(['count']),
  methods: mapMutations(['increment', 'decrement']),
};
</script>

以上代码中，我们通过 `mapState` 和 `mapMutations` 辅助函数将 Vuex Store 中的 `count` 状态和 `increment` 和 `decrement` 变更方法映射到组件中，从而可以在组件中使用这些状态和方法。

现在，我们可以启动应用并测试数据持久化功能了。在浏览器中打开 http://localhost:8080/，点击 Increment 按钮增加计数器的值，然后刷新页面，可以发现计数器的值仍然保持不变，说明数据已经被成功地存储到了本地存储中。

希望这个示例能够帮助你理解如何在 Vue3 中使用 vuex-persistedstate 库实现 Vuex 数据的持久化。