pinia持久化存储（pinia-plugin-persistedstate）

快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

安装

pnpm

pnpm add pinia-plugin-persistedstate

npm

npm i pinia-plugin-persistedstate

yarn

yarn add pinia-plugin-persistedstate

将插件添加到 pinia 实例上

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

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

用法

创建 Store 时，将 persist 选项设置为 true。

选项式语法

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

组合式语法

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

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

现在，你的整个 Store 将使用默认持久化配置保存。