面试题：Vue中Pinia如何实现基本的持久化存储

安装插件：可以使用pinia-plugin-persistedstate插件来实现状态的持久化存储。首先通过npm或yarn安装该插件：

npm install pinia-plugin-persistedstate

或

yarn add pinia-plugin-persistedstate

配置插件：在Vue项目的入口文件（通常是main.js）中，配置Pinia并使用该插件：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
app.mount('#app')

在Store中使用：在定义的Pinia store中，通过persist选项来配置持久化存储：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  persist: {
    key: 'user-store',
    storage: localStorage
  }
})

上述配置中，key指定了在本地缓存中存储的键名，storage指定了存储方式为localStorage，也可以改为sessionStorage。

页面刷新或重新加载时恢复数据：当页面刷新或重新加载时，pinia-plugin-persistedstate插件会自动从本地缓存（如localStorage）中读取数据，并将其恢复到Pinia的状态中。因为在应用启动时，Pinia会初始化状态，此时插件会检查相应的本地缓存数据，并填充到状态中，从而实现数据的恢复。

自定义方法实现

自定义存储逻辑：在Pinia store中定义自定义的方法来手动处理数据的存储和读取。例如：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    saveToLocalStorage() {
      localStorage.setItem('counter-store', JSON.stringify({ count: this.count }))
    },
    loadFromLocalStorage() {
      const data = localStorage.getItem('counter-store')
      if (data) {
        const { count } = JSON.parse(data)
        this.count = count
      }
    }
  }
})

调用自定义方法：在合适的时机调用这些方法，例如在组件挂载和销毁时：

<template>
  <div>
    <p>Count: {{ counterStore.count }}</p>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()

// 组件挂载时加载数据
onMounted(() => {
  counterStore.loadFromLocalStorage()
})

// 组件销毁时保存数据
onBeforeUnmount(() => {
  counterStore.saveToLocalStorage()
})
</script>

这样在页面刷新或重新加载时，通过手动调用方法，实现状态数据在本地缓存中的存储与恢复。

星途面试题库

面试题：Vue中Pinia如何实现基本的持久化存储

知识考点

面试题答案

自定义方法实现