vue3中如何使用vuex-persistedstate来实现状态管理，请帮我写一个存储userinfo的demo，vue3语法中将setup写在script标签上

好的，以下是一个使用vuex-persistedstate实现状态管理的demo，其中存储了用户信息userinfo：

<template>
  <div>
    <p>User Info: {{ userInfo }}</p>
    <button @click="updateUserInfo">Update User Info</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default defineComponent({
  setup() {
    const store = createStore({
      state() {
        return {
          userInfo: { name: '', age: 0 }
        }
      },
      mutations: {
        updateUserInfo(state, userInfo) {
          state.userInfo = userInfo
        }
      },
      plugins: [
        createPersistedState({
          key: 'user',
          paths: ['userInfo']
        })
      ]
    })

    const userInfo = store.state.userInfo

    function updateUserInfo() {
      store.commit('updateUserInfo', { name: 'John Doe', age: 30 })
    }

    return {
      userInfo,
      updateUserInfo
    }
  }
})
</script>

在上述代码中，我们通过`createStore`方法创建一个store对象，并在其中定义了一个状态`userInfo`，以及一个用于更新`userInfo`的mutation方法`updateUserInfo`。在`plugins`中使用了`vuex-persistedstate`，并设置了`key`为"user"，`paths`为["userInfo"]，表示只对`userInfo`这个状态进行持久化存储。

在`setup`函数中，我们获取了`userInfo`状态，并定义了一个`updateUserInfo`方法，用于触发`updateUserInfo`mutation的commit操作，并将新的用户信息{name: 'John Doe', age: 30}传递给它。当我们点击按钮时，即可更新`userInfo`状态，并通过`vuex-persistedstate`实现持久化存储。