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

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

自定义

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

效果:

posted @ 2023-08-13 14:27  蕝戀  阅读(1818)  评论(0编辑  收藏  举报