Pinia的持久化存储pinia-plugin-persistedstate

pinia 和 vuex 一样，数据是短时的，只要一刷新页面，数据就会恢复成初始状态，为了避免这个问题，可以对其采用持久化保存方法

使用官方推荐的插件去实现持久化存储，这样更便捷，省时省力。之前官方推荐的插件为 pinia-plugin-persist，现在官方推荐的插件为 pinia-plugin-persistedstate当然，实现持久化存储的插件肯定不止这一种，想用别的也可以

1. 安装插件

安装 pinia-plugin-persistedstate

yarn add pinia-plugin-persistedstate
# 或者使用 npm
npm install pinia-plugin-persistedstate

2. 引入插件

在 main.ts 中引入

引入 pinia-plugin-persistedstate

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

// 下面这3行
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

createApp(App).use(pinia).mount('#app')

3、所有 Store 都默认开启持久化存储

该配置将会使所有 Store 持久化存储，且必须配置 persist: false 显式禁用持久化

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 这里

const pinia = createPinia()

pinia.use(
  // 这里
  createPersistedState({
    auto: true,
  })
)
createApp(App).use(pinia).mount('#app')

某一个store文件的基本写法

import { defineStore } from 'pinia'

defineStore('persisted', {
  state: () => ({ saved: '' }),
})

上述例子中，store 将使用默认配置（或者已有的全局配置）进行持久化存储。

import { defineStore } from 'pinia'

defineStore('not-persisted', {
  state: () => ({ saved: '' }),
  persist: false, // 这个store不需要持久化存储，
})

上述例子中，如果所有 Store 都默认开启持久化存储了，但是上述例子中的store不需要存储化了，那就可以单独为上述例子中 Store 设置是否持久化

4. 使用插件

方式1：默认保存

下面这种写法会将当前模块中的所有数据都进行持久化保存，默认保存在 localStorage中， key 为模块 id，刷新页面不需要手动读取数据，插件会自动读取

store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
  
  persist: true, // true 表示开启持久化保存
})

方式2：设置 key 、指定保存内容

你可以主动设置 key 名，也可以指定哪些数据保存，默认会保存当前模块全部数据。

store/user.ts

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
    save: { 
        me: 'saved',
        notMe: 'not-saved',
    },
  }),
  
  persist: { 
      key: 'storeUser', 
      paths: ['save.me', 'saveMeToo'],
  },
})

该 store 中, 数据将被持久化存储在 localStorage 中的 storeUser key 中。同时只有 save.me 和 name 被持久化，而其他的state不会被持久化。

你甚至可以对不同数据设置不同的本地存储方式

store/user.ts

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
  }),
  
  persist: [  
    {  
      paths: ['name'],  
      storage: localStorage,  
    },  
    {  
      paths: ['age'],  
      storage: sessionStorage,  
    },  
  ]
  
})

上述例子中， name 的值将保存在 localStorage 中，而 age 的值将保留在 sessionStorage 中，sex 则不会持久化。

方式3：保存到 cookie

保存到 cookie 中当然也是可以的，不过需要手动添加 cookie 的保存方式，同样，此处也是推荐使用插件 js-cookie 来完成

npm install js-cookie

store/user.ts

import Cookies from 'js-cookie'

// 手动添加cookie
const cookiesStorage: Storage = {
  setItem (key, state) {
    // 设置有效期 3 天，不设置默认同 sessionStorage 有效期一致
    return Cookies.set(key, state.accessToken, { expires: 3 }) 
  },
  getItem (key) {
    return JSON.stringify({
      accessToken: Cookies.get(key),
    })
  },
}

export const useUserStore = defineStore('storeUser', {
  state: () => ({
    name: null,
    age: null,
    sex: null,
    accessToken: 'xxxxxxxxx',
  }),
  persist: {
    storage: cookiesStorage, // 使用手动添加的cookie
    paths: ['accessToken'] // cookie 一般用来保存 token
  },
})