Pinia 是一个 Vue 3 的状态管理库,而永久化存储则可以通过使用浏览器提供的本地存储方式来实现。

以下是一个使用 localStorage 来实现 Pinia 永久化存储的示例:

import { createPinia } from 'pinia'

const pinia = createPinia()

// 定义一个 localStorage 插件
function localStoragePlugin(store) {
  // 在初始化时从 localStorage 中读取数据
  const persistedState = localStorage.getItem('pinia-state')
  if (persistedState) {
    store.$restore(JSON.parse(persistedState))
  }

  // 订阅 store 的变化,每次变化时将数据存储到 localStorage 中
  store.$subscribe((mutation, state) => {
    localStorage.setItem('pinia-state', JSON.stringify(state))
  })
}

// 注册插件
pinia.use(localStoragePlugin)

export default pinia

这样,每次修改 Pinia 的状态时,都会将状态数据存储到 localStorage 中。在应用重新加载时,会从 localStorage 中读取数据并初始化 Pinia 的状态。这样就实现了 Pinia 的永久化存储。

pinia的永久化存储怎么弄

原文地址: https://www.cveoy.top/t/topic/09N 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录