526互联

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

发布时间 2023-08-13 14:33:10作者: 蕝戀

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 将使用默认持久化配置保存。

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

自定义

如何你不想使用默认持久化保存配置，将一个对象传递给 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']
    }

效果：