pinia持久化存储插件-pinia-plugin-persistedstate

pinia-plugin-persistedstate 丰富的功能可以使 Pinia Store 的持久化更易配置：

• 与 vuex-persistedstate 相似的 API
• 所有 Store 均可单独配置
• 自定义 storage 和数据序列化
• 恢复持久化数据前后的 hook
• 每个 Store 具有丰富的配置
• 兼容 Vue 2 和 3
• 无任何外部依赖

安装

使用你喜欢的js包管理器安装，比如npm

npm i pinia-plugin-persistedstate

将插件添加到 pinia 实例上（编辑main.js）

import { createPinia } from 'pinia'
// 导包
**import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'**

const pinia = createPinia()
// 初始化
**pinia.use(piniaPluginPersistedstate)**

使用方法

在创建store仓库时，添加store的选项（组合式api定义store）

import { defineStore } from 'pinia'

// 在定义store的时候提供第三个options参数对象。
export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
**  {
    persist: true,
  }**
)

选项式：

import { defineStore } from 'pinia'

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

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

默认持久化保存配置如下:

• 使用 localStorage 进行存储
• store.$id 作为 storage 默认的 key
• 使用 JSON.stringify/JSON.parse 进行序列化/反序列化
• 整个 state 默认将被持久化

自定义

如何你不想使用默认持久化保存配置，将一个对象传递给 Store 的 persist 属性来配置持久化。

import { defineStore } from 'pinia'

// 在定义store的时候提供第三个options参数对象。
export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('你好 pinia')
    return { someState }
  },
  {
    // persist: true， 改成给定一个对象配置，即可自定义。
    persist: {
      // 在这里自定义配置
    },
  }
)

常用自定义配置项：

key: 指定storeage中存储的key名，默认为store的key-id。有时候太简单容易和别的冲突，所以一般可以自定义key名。

**paths: ** 指定state中那些数据需要被持久化存储。默认是持久化所有state中的数据。

实例：

    persist: {
      // 将存储的key名改成mychannel
      key: 'mychannel',
      // 只是将channelList持久化存储
      paths: ['channelList']
    }

效果：