安装

 pnpm add pinia pinia-plugin-persistedstate 

配置

src下建立store文件夹并且创建index.ts文件 结构如下

store/index.ts

import type { App } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export const setupStore = (app: App<Element>) => {
  app.use(store)
}

export { store }

store/modules/app.ts

import { store } from '../index.ts'
import { defineStore } from 'pinia'

interface AppState {
  num: number
  isOpen: boolean
}

export const useAppStore = defineStore('app', {
  state: (): AppState => {
    return {
      num: 1,
      isOpen: false
    }
  },
  getters: {
    getNum(): number {
      return this.num
    }
  },
  actions: {
    setNum(num: number) {
      this.num = num
    },
    setIsOpen(isOpen: boolean) {
      this.isOpen = isOpen
    }
  },
  persist: true
})

export const useAppStoreWithOut = () => {
  return useAppStore(store)
}

main.ts

在main.ts中进行pinia的挂载
import { setupStore } from ‘./store/index.ts’
setupStore(app)

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入状态管理
import { setupStore } from './store/index.ts'
// 路由
import router, { setupRouter } from './router'
const setupAll = async () => {
  const app = createApp(App)
  setupRouter(app)
  setupStore(app)
  await router.isReady()

  app.mount('#app')
}

setupAll()

使用

<template>
  <div style="height: 100%">
    <div> HomeView </div>
    <div>{{ appStore.num }}</div>
    <button @click="handleDemo(1)">测试</button>
  </div>
</template>

<script setup lang="ts">
import { useAppStoreWithOut } from '../store/modules/app.ts'
defineOptions({ name: 'HomeView' })
const appStore = useAppStoreWithOut()
const handleDemo = (value: number) => {
  appStore.setNum(appStore.num + value)
  console.log('appStore.num', appStore.num)
}
</script>

<style lang="scss" scoped></style>

持久化存储截图

关于持久化

官网

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

基本配置

{
  persist: {
    key: 'user', // 存储的键名，默认为 store 的 id
    storage: localStorage, // 存储位置，默认为 localStorage
    paths: ['token', 'userInfo'], // 指定要持久化的状态，默认全部
    serializer: { // 序列化配置
      serialize: JSON.stringify,
      deserialize: JSON.parse
    }
  }
}

自定义存储键名

{
  persist: {
    key: 'my-app-user' // 自定义存储键名
  }
}

部分状态持久化

{
  persist: {
    paths: ['token'] // 只持久化 token
  }
}

使用 sessionStorage

{
  persist: {
    storage: sessionStorage // 使用 sessionStorage 替代 localStorage
  }
}

自定义序列化（如加密）

import { encrypt, decrypt } from '@/utils/crypto'

{
  persist: {
    serializer: {
      serialize: (value) => encrypt(JSON.stringify(value)),
      deserialize: (value) => JSON.parse(decrypt(value))
    }
  }
}

多存储方式组合

{
  persist: [
    {
      key: 'user-info',
      paths: ['userInfo'],
      storage: localStorage
    },
    {
      key: 'user-token',
      paths: ['token'],
      storage: sessionStorage
    }
  ]
}

部分内容来源 Pinia 及其持久化插件的完整使用指南