面试题：Vue Pinia基于Composition API状态管理库的数据持久化

Question

在基于Vue Pinia和Composition API的项目中，如何实现状态数据的持久化，例如刷新页面后计数器（count）的值不丢失。描述思路并给出关键代码示例。

Answer 1

思路

1. 利用本地存储：浏览器的本地存储（localStorage）可以在用户关闭浏览器后依然保留数据。在Vue Pinia中，可以在状态变化时将数据存入本地存储，在页面加载时从本地存储读取数据初始化状态。
2. 插件辅助：也可以使用一些第三方插件，如pinia-plugin-persistedstate，它可以更方便地实现状态持久化，而无需手动处理本地存储的读写。

关键代码示例

1. 手动利用本地存储
   • 定义Pinia store

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: localStorage.getItem('counter') ? parseInt(localStorage.getItem('counter')) : 0
  }),
  actions: {
    increment() {
      this.count++
      localStorage.setItem('counter', this.count.toString())
    },
    decrement() {
      this.count--
      localStorage.setItem('counter', this.count.toString())
    }
  }
})

- **在组件中使用**

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

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

2. 使用pinia-plugin-persistedstate插件
   • 安装插件：npm install pinia-plugin-persistedstate
   • 配置插件

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

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia

- **定义Pinia store**

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  persist: true
})

在组件中使用方式与手动方式类似，只是无需手动处理本地存储的读写，pinia-plugin-persistedstate插件会自动处理。