vue3 + pinia 持久化

在 vue3 中，我们会用 pinia 来代替 vuex 完成状态的管理，而我们的持久化插件也变成了 pinia-plugin-persistedstate。

1. 安装 pinia-plugin-persistedstate.

• pnpm：

pnpm i pinia-plugin-persistedstate

• npm：

npm i pinia-plugin-persistedstate

•  yarn：

yarn add pinia-plugin-persistedstate

 注意：在安装 pinia-plugin-persistedstate 时，必须先安装了 pinia，因为 pinia-plugin-persistedstate 是基于 pinia 之上的插件。

2. 将插件添加到 pinia 实例上

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

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

 

3.  用法

3.1 全部持久化

在设置好的 store 后面加上 persist 对象，设置为 true，则所有状态都为持久化。

import { defineStore } from 'pinia'

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

3.2 部分持久化（指定）

在 persist 对象中，加入 paths，并将需要持久化的 状态以字符串数组的形式传给 paths 即可。

import { defineStore } from 'pinia'

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

更多具体详情请看官网：快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)