vue3 pinia-plugin-persist 刷新保留数据

对于vue3的pinia-plugin-persist插件，它可以实现在刷新页面时保留数据的功能。具体操作为：

1. 安装依赖：`npm install pinia-plugin-persist`

2. 在main.js中引入插件：

import { createPinia } from 'pinia'
import { createPersistPlugin } from 'pinia-plugin-persist'

const pinia = createPinia()

// 创建插件实例，将数据保存在localStorage中
const persistPlugin = createPersistPlugin({
  /** 数据持久化的key值 */
  key: 'my-app',
  /** 需要进行持久化的state */
  states: ['user', 'cart'],
  /** 缓存过期时间，默认为0，即永不过期 */
  expires: 0
})

// 将插件实例添加到pinia实例中
pinia.use(persistPlugin)

// 创建app实例并将pinia实例挂载到全局
const app = createApp(App)
app.use(pinia)
app.mount('#app')

3. 在需要进行数据持久化的state中添加`persist`属性，指定该state需要进行持久化：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore({
  id: 'auth',
  state: () => ({
    token: '',
    user: null
  }),
  persist: true, // 将该state进行持久化
  actions: {
    login() { ... },
    logout() { ... }
  }
})

这样，当页面刷新时，pinia-plugin-persist插件会自动将需要持久化的state从localStorage中取出来，重新赋值给对应的state，实现数据的保留。