個(gè)人簡(jiǎn)介

??個(gè)人主頁(yè)： 前端雜貨鋪
???♂?學(xué)習(xí)方向： 主攻前端方向，正逐漸往全干發(fā)展
??個(gè)人狀態(tài)： 研發(fā)工程師，現(xiàn)效力于中國(guó)工業(yè)軟件事業(yè)
??人生格言： 積跬步至千里，積小流成江海
??推薦學(xué)習(xí)：??前端面試寶典 ??Vue2 ??Vue3 ??Vue2/3項(xiàng)目實(shí)戰(zhàn) ??Node.js??Three.js ??JS版算法
??個(gè)人推廣：每篇文章最下方都有加入方式，旨在交流學(xué)習(xí)&資源分享，快加入進(jìn)來(lái)吧

Pinia

??前言

就我們上篇文章中的 簡(jiǎn)易版購(gòu)物車實(shí)戰(zhàn) 而言，它的狀態(tài)是 不持久的，因?yàn)楫?dāng)我們對(duì)商品加/減，對(duì)單選/全選框進(jìn)行操作后，再 刷新頁(yè)面，就 又回到了最原始的狀態(tài)，那么如何能記錄我們之前的操作呢，Pinia持久化插件就可以解決該問(wèn)題！

??Pinia 持久化插件

Pinia 持久化插件是一個(gè)函數(shù)，可以選擇返回要添加到 store 的屬性。

其基本思路為：監(jiān)聽(tīng) state 的變化，把每次變化的結(jié)果放到 localStorage 中。

我們?cè)?store 文件下創(chuàng)建 plugins文件，再創(chuàng)建 persistedState.ts 文件

persistedState.ts

我們導(dǎo)入 pinia，把 PiniaPluginContext 賦值給 context，為 PiniaPlugin 的 上下文。

通過(guò) context.store.$id（即模塊名） 我們可以獲取到 localStorage 的詳細(xì)內(nèi)容。

通過(guò) context.store.$patch 我們可以把數(shù)據(jù)存放到 pinia 對(duì)應(yīng)的模塊里。

通過(guò) context.store.$subscribe 我們可以在每次 state 發(fā)生變化時(shí)，把它保存到 localStorage 中。

當(dāng)我們點(diǎn)擊 Age+1 按鈕時(shí)，看一下 _store 和 state 的廬山真面目：

import { PiniaPluginContext } from "pinia";

export function persistedState(context: PiniaPluginContext) {
    // 根據(jù)模塊名，拿到對(duì)應(yīng)localStorage
    const currentState = JSON.parse(
        localStorage.getItem(context.store.$id) || "{}"
    )

    // 把數(shù)據(jù)存放到pinia對(duì)應(yīng)的模塊里
    context.store.$patch(currentState)
    /**
     * 每次state發(fā)生變化時(shí)，都把它保存在localStorage里
     * 參數(shù)一：當(dāng)前修改store的上下文，可以通過(guò)它獲取_store.storeId充當(dāng)鍵
     * 參數(shù)二：當(dāng)前修改的狀態(tài)，可以充當(dāng)值
     */
    context.store.$subscribe((_store, state) => {
        console.log(_store)
        console.log(state)
        // 存入鍵值（依據(jù)上圖數(shù)據(jù)結(jié)構(gòu)）（需要序列化）
        localStorage.setItem(_store.storeId, JSON.stringify(state))
    }, {
        // 組件卸載，依賴仍然存在
        detached: true
    })
}

shop.vue

在上一篇 Pinia實(shí)現(xiàn)簡(jiǎn)易版購(gòu)物車 的基礎(chǔ)上，我們對(duì) shop.vue 進(jìn)行補(bǔ)充，把 user.ts 也引入了進(jìn)來(lái)，并進(jìn)行簡(jiǎn)單的使用（年齡+1）

<div>
    <button @click="userStore.age += 1">Age+1</button>
    {{ userStore.age }}
</div>
...
import { useUserStore } from './store/user';
const userStore = useUserStore();

index.ts

在 index.ts 中導(dǎo)入 persistedState，然后通過(guò) pinia 使用它

import { createPinia } from 'pinia'
import { persistedState } from './plugins/persistedState'

const pinia = createPinia()

// 使用插件
pinia.use(persistedState)

export default pinia

這樣我們的自定義持久化插件就完成啦~

????本篇小結(jié)

本篇借助 Pinia 的一些屬性，把數(shù)據(jù)存儲(chǔ)到 localStorage，從而實(shí)現(xiàn)了數(shù)據(jù)的持久化。

其實(shí)也有一些現(xiàn)成的持久化插件，比如終端鍵入：npm i pinia-plugin-persist-S 并進(jìn)行相應(yīng)配置等，也可以實(shí)現(xiàn)數(shù)據(jù)的持久化（感興趣的小伙伴可以自行搜索 Pinia持久化插件 的具體內(nèi)容，學(xué)習(xí)安裝及相關(guān)配置）！

好啦，本篇文章到這里就要和大家說(shuō)再見(jiàn)啦，祝你這篇文章閱讀愉快，你下篇文章的閱讀愉快留著我下篇文章再祝！

參考資料：

1. Pinia 官方文檔
2. Pinia 教程 【作者：千鋒教育】

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-639019.html

到了這里，關(guān)于Vue3狀態(tài)管理庫(kù)Pinia——自定義持久化插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！