面试题：Vue Pinia实现离线支持与持久化存储的深度整合

1. Pinia持久化存储

安装插件：使用 pinia-plugin-persistedstate 插件来实现Pinia的持久化存储。通过 npm install pinia-plugin-persistedstate 安装。
配置插件：在Vue应用的入口文件（通常是 main.js）中，导入并使用该插件。

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

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

app.use(pinia)

定义持久化配置：在Pinia的store中，可以通过 persist 选项来配置持久化方式。例如：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    data: []
  }),
  persist: {
    key: 'my-store-key',
    storage: localStorage
  }
})

2. 与Service Worker整合

注册Service Worker：在Vue应用中，在 main.js 中注册Service Worker。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service - worker.js')
    .then((registration) => {
        console.log('ServiceWorker registration successful with scope: ', registration.scope)
      })
    .catch((error) => {
        console.log('ServiceWorker registration failed: ', error)
      })
  })
}

缓存策略：在Service Worker中实现缓存策略，例如使用 Cache - First 或 Network - First 策略。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
    .then((response) => {
        if (response) {
          return response
        }
        return fetch(event.request)
      })
  )
})

3. 数据更新处理

在线更新：当应用在线时，数据更新首先在Pinia的store中进行，同时更新持久化存储（如 localStorage）。

const myStore = useMyStore()
myStore.data.push(newData)
// 此时localStorage中的数据也会同步更新（依赖pinia-plugin-persistedstate）

离线更新：在离线状态下，数据更新先在Pinia的store中暂存。当重新上线时，通过Service Worker拦截请求，将暂存的数据发送到服务器进行更新。可以在Service Worker的 fetch 事件中实现：

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'POST' && event.request.url === '/update - data') {
    event.respondWith(
      caches.match('/offline - data')
      .then((response) => {
          return response.json()
        })
      .then((offlineData) => {
          // 发送offlineData到服务器更新
          return fetch(event.request, {
            body: JSON.stringify(offlineData),
            headers: {
              'Content - Type': 'application/json'
            }
          })
        })
    )
  }
})

4. 版本控制

Pinia状态版本：在Pinia的store中，可以添加版本字段。

export const useMyStore = defineStore('myStore', {
  state: () => ({
    data: [],
    version: 1
  })
})

Service Worker版本：在Service Worker中，通过修改 cache - name 来控制缓存版本。

const cacheName = 'my - app - v1'
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(cacheName)
    .then((cache) => cache.addAll([
        '/index.html',
        '/styles.css',
        '/script.js'
      ]))
  )
})

当需要更新版本时，修改 cacheName 为 my - app - v2 等，并重新部署Service Worker。

5. 离线缓存失效机制

时间控制：在Service Worker中，可以设置缓存的过期时间。例如，通过在缓存数据时添加时间戳，在读取缓存时检查时间戳是否过期。

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
    .then((response) => {
        if (response) {
          const cacheTime = response.headers.get('X - Cache - Time')
          if (Date.now() - parseInt(cacheTime) > 24 * 60 * 60 * 1000) {
            // 缓存过期，重新请求
            return fetch(event.request)
          }
          return response
        }
        return fetch(event.request)
      })
  )
})

版本更新失效：当Service Worker版本更新时，旧的缓存会被清除。在 activate 事件中实现：

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys()
    .then((cacheNames) => {
        return Promise.all(
          cacheNames.filter((cacheName) => cacheName.startsWith('my - app - '))
          .filter((cacheName) => cacheName!== 'my - app - v2')
          .map((cacheName) => caches.delete(cacheName))
        )
      })
  )
})

星途面试题库

面试题：Vue Pinia实现离线支持与持久化存储的深度整合

知识考点

面试题答案

1. Pinia持久化存储

2. 与Service Worker整合

3. 数据更新处理

4. 版本控制

5. 离线缓存失效机制