面试题：Vue中Pinia状态管理如何实现数据持久化

Question

在Vue项目中使用Pinia进行状态管理，描述一下实现数据持久化的常用方法，并给出简单的代码示例。

Answer 1

常用方法

1. 使用localStorage：localStorage可以在浏览器端持久化存储数据，关闭页面后数据依然存在。将Pinia中的状态数据存储到localStorage，在应用初始化时再从localStorage读取并设置到Pinia状态中。
2. 使用sessionStorage：与localStorage类似，但sessionStorage中的数据在页面会话结束时（关闭标签页）会被清除。

代码示例（以localStorage为例）

1. 安装依赖：
   • 如果项目还没有安装Pinia，先安装Pinia：npm install pinia
2. 创建Pinia store并实现数据持久化：
   • 创建一个store.js文件，例如：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  },
  // 在store定义时，从localStorage读取数据
  // 如果localStorage中有数据，就使用其初始化状态
  // 如果没有，就使用默认的state
  // 在actions中更新状态后，同步更新localStorage
  // 这里简单示例在increment方法中更新localStorage
  setup() {
    const storedCount = localStorage.getItem('counter');
    if (storedCount) {
      this.count = JSON.parse(storedCount);
    }
  },
  afterEachAction(ctx) {
    if (ctx.name === 'increment') {
      localStorage.setItem('counter', JSON.stringify(this.count));
    }
  }
});

3. 在Vue组件中使用：

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

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

在上述代码中，setup钩子函数在store创建时从localStorage读取数据初始化count状态。afterEachAction钩子函数在increment操作执行后将最新的count值存储到localStorage中。这样就实现了Pinia状态数据的持久化。如果使用sessionStorage，只需要将localStorage替换为sessionStorage即可。