Pinia插件

Pinia和Vuex都有一个通病，就是页面一刷新状态就会丢失。

那么怎么才能在刷新的时候让Pinia的状态不丢失呢？我们可以将Pinia的状态拷贝一份存放到本地缓存LocalStorage、SessionStorage或Cookies中都可以。

封装插件

这里将存储到LoacalStorage为例：

src/hooks/useLocalStorage.ts：

import { PiniaPluginContext } from 'pinia'
import { store } from '@/store/index'
import { toRaw } from 'vue'

// 将数据存储到本地缓存localStorage中
const setStorage = (key: string, value: any) => {
  localStorage.setItem(key, JSON.stringify(value))
}

// 从本地缓存localStorage中获取相应的值
const getStorage = (key: string) => {
  return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key) as string) : {}
}

// 防止页面刷新pinia数据丢失的插件
export const useLoacalStorage = ({ store }: PiniaPluginContext) => {
  // 拿到从本地缓存中获取的值
  let data = getStorage(`${store.$id}State`)
  // 只要store的state中的任意状态发生变化就会触发
  store.$subscribe(() => {
    setStorage(`${store.$id}State`, toRaw(store.$state))
  })
  return {
    ...data
  }
}

export const setUpUseLocalStorage = () => {
  // 添加 store 插件来扩展每一个 store
  store.use(useLoacalStorage)
}

main.ts

import { setUpUseLocalStorage } from '@/hooks/useLoacalStorage'

setUpUseLocalStorage()

第七章-Pinia插件（自用）

Pinia插件

封装插件