官网

https://prazdevs.github.io/pinia-plugin-persistedstate/zh

安装

npm i pinia-plugin-persistedstate

注

pinia持久化插件也是存储到localStorage中,

为什么不直接使用localStorage?

自动状态同步

       持久化插件自动将Pinia的状态存储到localStorage中,

       无需手动处理状态的读取和写入

易用性

       无需手动处理localStorage的键值对存储、数据转换等繁琐过程

与Vue组件状态紧密集成

       持久化插件与Vue组件的响应式数据完美结合

       当状态改变时,依赖这些状态的组件会自动更新视图

       与仅仅从localStorage中读取静态数据相比更加灵活和强大

main.js

import { createApp } from 'vue'

//导入Pinia的createPinia方法,用于创建Pinia实例(状态管理库)
import { createPinia } from 'pinia'

//从 pinia-plugin-persistedstate 模块中导入 piniaPluginPersistedstate
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

import App from './App.vue'

//创建一个Pinia实例,用于在应用中集中管理状态(store)
const pinia = createPinia()

//将插件添加到 pinia 实例上
pinia.use(piniaPluginPersistedstate)

//createApp(App).mount('#app')
const app = createApp(App)
app.use(pinia) //将Pinia实例注册到Vue应用中
app.mount('#app')

web.js

import { reactive, ref } from 'vue'
import { defineStore } from 'pinia'

/*
  定义一个基于 Pinia 的 Store
  第1个参数 web 是 useWebStore 在应用中的唯一标识符(ID)
  第2个参数是 Setup函数 或 Option对象
*/
export const useWebStore = defineStore('web', () => {
  //定义一个响应式对象，存储网站信息
  const web = reactive({
    title: "邓瑞编程",
    url: "dengruicode.com"
  })

  //定义一个响应式引用，存储用户数
  const users = ref(1000)
  
  //定义方法
  const userAdd = () => {
    users.value++
  }

  return {
    web,
    users,
    userAdd
  }
},
{
  //持久化存储到 localStorage 中
  persist: true
})