Pina + Vue3 实现本地持久化存储

为什么我需要这个插件？

api 的 pinia-plugin-persistedstate 通过通过通过为为每个和和每个项目提供项目项目项目商店商店商店商店的的持久性持久性。。无论您您对保存保存完整完整存储存储没问题persist问题，该插件都能满足您的需求，在您想要保留的存储上使用相同的选项。

1. 使用您最喜欢的包管理器安装：

pnpm i pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

2. 将插件添加到 pinia：

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

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

3. 将选项添加persist到要持久化数据的模块：

import { defineStore } from 'pinia'

export const useStore = defineStore('store', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})

配置

注意：您可以通过为属性指定选项来配置商店的持久化方式persist：

import { defineStore } from 'pinia'

defineStore('store', {
  state: () => ({
    toLocal: '',
    toSession: '',
    toNowhere: '',
  }),
  persist: [
    {
      paths: ['toLocal'],
      storage: localStorage,
    },
    {
      paths: ['toSession'],
      storage: sessionStorage,
    },
  ],
})