Pinia 中的订阅机制与数据持久化

Pinia 中的订阅机制与数据持久化

在开发 Vue 应用时，我们经常会遇到以下问题：

1. 如何监听 Store 中数据的变化，并在数据更新时执行某些操作？

2. 如何将数据持久化到浏览器的 localStorage 中，以实现刷新页面后数据不丢失？

这些问题可以通过 Pinia 的 subscribe 方法和浏览器的 localStorage 来解决。接下来，我们将通过具体的例子来探讨如何实现这些功能。

问题情景：监听数据变化

假设你正在开发一个情话列表应用，用户可以动态添加情话到列表中。你希望在每次情话列表更新时，执行某些操作（如打印日志或保存到本地存储）。如何实现这一功能呢？

解决方案：使用 Pinia 的 subscribe 方法

Pinia 提供了一个 subscribe 方法，允许你监听 Store 中数据的变化，并在数据更新时执行回调函数。

示例代码：

// stores/talk.js
import { defineStore } from 'pinia';

export const useTalkStore = defineStore('talk', {
  state: () => ({
    talkList: [
      { id: 1, content: '我爱你' },
      { id: 2, content: '我也爱你' }
    ]
  }),
  actions: {
    addTalk(talk) {
      this.talkList.push(talk);
    }
  }
});

对于集合添加元素，也可以用unshift，unshift 方法的主要作用是向数组的开头添加元素。

在组件中，你可以通过 subscribe 方法监听 talkList 的变化：

import { useTalkStore } from '@/stores/talk';

const talkStore = useTalkStore();

// 监听 talkList 的变化
talkStore.$subscribe((mutation, state) => {
  console.log('数据发生变化：', mutation);
  console.log('当前状态：', state.talkList);
});

问题情景：数据持久化

在上述情话列表应用中，你希望即使用户刷新页面，情话列表也不会丢失。如何实现数据的持久化呢？

解决方案：使用浏览器的 localStorage

浏览器的 localStorage 提供了一种简单的方式来存储数据，即使页面刷新或关闭浏览器，数据仍然会保留。你可以通过 localStorage 将情话列表保存到本地存储中。

示例代码：

JavaScript复制

// 在添加情话时，将数据保存到 localStorage
talkStore.$subscribe((mutation, state) => {
  console.log('数据发生变化：', mutation);
  console.log('当前状态：', state.talkList);

  // 将 talkList 转换为 JSON 字符串并保存到 localStorage
  localStorage.setItem('talkList', JSON.stringify(state.talkList));
});

注意，localStorage中只能存放字符串，因此我们把它转成json字符串，人人看得懂。

问题情景：从 localStorage 初始化数据

在应用初始化时，你希望从 localStorage 中读取情话列表，并将其作为初始值。如何实现这一功能呢？

解决方案：在 Store 初始化时读取 localStorage

你可以在 Store 的 state 中初始化数据时，从 localStorage 中读取并解析情话列表。

示例代码：

export const useTalkStore = defineStore('talk', {
  state: () => ({
    // 从 localStorage 中读取情话列表
    talkList: JSON.parse(localStorage.getItem('talkList') || '[]')
  }),
  actions: {
    addTalk(talk) {
      this.talkList.push(talk);
    }
  }
});

完整示例

将上述功能整合到一个完整的应用中：

// stores/talk.js
import { defineStore } from 'pinia';

export const useTalkStore = defineStore('talk', {
  state: () => ({
    // 从 localStorage 中读取情话列表
    talkList: JSON.parse(localStorage.getItem('talkList') || '[]')
  }),
  actions: {
    addTalk(talk) {
      this.talkList.push(talk);
    }
  }
});

<template>
  <div>
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li>
    </ul>
    <button @click="addTalk">添加情话</button>
  </div>
</template>

<script setup>
import { useTalkStore } from '@/stores/talk';

const talkStore = useTalkStore();

// 监听 talkList 的变化
talkStore.$subscribe((mutation, state) => {
  console.log('数据发生变化：', mutation);
  console.log('当前状态：', state.talkList);

  // 将 talkList 转换为 JSON 字符串并保存到 localStorage
  localStorage.setItem('talkList', JSON.stringify(state.talkList));
});

function addTalk() {
  talkStore.addTalk({
    id: Date.now(),
    content: '这是一句新的情话'
  });
}
</script>

总结

通过 Pinia 的 subscribe 方法和浏览器的 localStorage，你可以实现以下功能：

1. 监听数据变化：通过 subscribe 方法监听 Store 中数据的变化，并在数据更新时执行回调函数。

2. 数据持久化：通过 localStorage 将数据存储到浏览器本地，实现数据的持久化。

3. 初始化数据：在 Store 初始化时从 localStorage 中读取数据，避免数据丢失。

怎么样，理解了么