方便追蹤與調(diào)試 state，支持 Composition API 定義 store，支持 HMR，支持 Plugin 擴(kuò)展

其核心的 defineStore API，讓我覺(jué)得它可以摒棄之前 Vuex 的全局集中狀態(tài)管理的思想，利用 Vue 3 的 Composition 特性，提供隨處按需定義小型 store 的能力。
這讓我們更加容易編寫(xiě)和管理很多不同模塊的 store，提高代碼可讀性，也讓 store 更容易的擴(kuò)展。

如何持久化？

在某些特定的單頁(yè)面應(yīng)用場(chǎng)景下，我們使用常規(guī)的 store 來(lái)存儲(chǔ)數(shù)據(jù)，很多時(shí)候面臨著刷新就會(huì)被重置，所以，我們急需一個(gè)插件功能來(lái)實(shí)現(xiàn)對(duì)某些特定的數(shù)據(jù)進(jìn)行狀態(tài)保持。

這里我們很容易想到可以用 sessionStorage 或者 localStorage 來(lái)進(jìn)行相應(yīng)的處理，但是要對(duì)不同的 store 中不同的字段進(jìn)行處理
pinia-plugin-persist它提供了簡(jiǎn)便的使用方式以及靈活的配置方式，下面我就和大家分享一下這款插件的使用方式及實(shí)現(xiàn)原理。

安裝

1、 npm
npm install pinia-plugin-persist
2、 yarn
yarn add pinia-plugin-persist
3、 pnpm
pnpm add pinia-plugin-persist

配置setup

vue2

import Vue from 'vue'
import vueCompositionApi from '@vue/composition-api'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

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

Vue.use(vueCompositionApi)
Vue.use(pinia)

vue3

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPersist)
createApp({})
  .use(pinia)
  .mount('#app')

Typescript definitions

將pinia-plugin-persist類型定義文件添加到您的 tsconfig 文件中。

{
  "compilerOptions": {
    "types": [
      "pinia-plugin-persist"
    ]
  },
}

高級(jí)用法

基本用法忽略
在store文件夾中創(chuàng)建index.ts
paths默認(rèn)情況下，整個(gè)狀態(tài)都會(huì)被持久化，但是您可以通過(guò)在每個(gè)策略中設(shè)置鍵來(lái)指定想要持久化的狀態(tài)鍵。
在此示例中，我們將firstName和保存lastName在 sessionStorage 中，并保存accessToken在 localStorage 中。

1.png

import { defineStore} from 'pinia'
export const useUserStore = defineStore('storeUser', {
  state () {
    return {
      firstName: 'S',
      lastName: 'L',
      accessToken: 'xxxxxxxxxxxxx',
    }
  },
  persist: {
    enabled: true,//開(kāi)啟存儲(chǔ)
    strategies: [// 指定存儲(chǔ)的位置以及存儲(chǔ)的變量都有哪些，該屬性可以不寫(xiě)， // 在不寫(xiě)的情況下，默認(rèn)存儲(chǔ)到sessionStorage 里面，默認(rèn)存儲(chǔ)state里面的所有數(shù)據(jù)。

      { storage: sessionStorage, paths: ['firstName', 'lastName'] },
      { storage: localStorage, paths: ['accessToken'] },
    ],
  },
  actions: {
    //存儲(chǔ)登錄頁(yè)面的用戶和token
     async piniaLogin(params: any) {
        await login(params).then((res: any) => {
            if (res.code == 200) {
                this.token = res.data.token
                this.username = res.data.account
            }else if(res.code == 422){
                ElMessage.error('賬號(hào)或密碼不對(duì)，請(qǐng)檢查賬號(hào)密碼')
            }
        });
    }
  }
})

登錄頁(yè)login.vue

// Pinia
import { useUserStore } from "@/store/index";
const store = testStore();
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      store.piniaLogin(ruleForm.value);
      console.log(ruleForm.value);
  
      setTimeout(() => {
        router.push("/");
        ElMessage({ message: "登陸成功！", type: "success" });
      }, 1000);
      isLoading.value = false;
    }
  });
};