前言

• ts 中使用 pinia 和 Vue3 基本一致，唯一的不同點在于，需要根據(jù)接口文檔給 state 標(biāo)注類型，也要給 actions 標(biāo)注類型；
• 以下都是 組合式API 的寫法，選項式API 的寫法大家可以去官網(wǎng)看看；
  • Pinia；
  • 持久化插件 - pinia-plugin-persistedstate；

一、定義類型文件

• 目標(biāo)文件：src/types/user.d.ts（這里以user.d.ts為例）；
• 代碼展示：

  export type User = {
      token: string;
      refreshToken: string;
      avatar: string; // 頭像
      mobile: string; // 脫敏手機號 - 帶星號的手機號
      account: string; // 用戶名
      id: string; // 用戶id
  };
  

二、創(chuàng)建 store

• 目標(biāo)文件：src/stores/user.ts；
• 代碼展示：

  import { defineStore } from 'pinia';
  import { ref } from 'vue';
  import type { User } from '@/types/user';
  
  export const useUserStore = defineStore('user', () => {
     const userInfo = ref<User>();
     
     const setUserInfo = (u: User) => {
         userInfo.value = u;
     };
     
     const delUserInfo = () => {
         // undefined 是 window 身上的一個屬性，大廠里面不推薦直接用 undefined 給變量賦值
         // void 是用來創(chuàng)建 undefined，不管它后面跟個啥，得到的都是 undefined；
         userInfo.value = void 0;
         // 上面的代碼等價于下面這個，但是上面的代碼更好
         // userInfo.value = undefined;
     }
     
     return { userInfo, setUserInfo, delUserInfo }
  });
  

• 

三、實現(xiàn) Pinia 的持久化

• 以往做法：
  • 按照以前的做法是自己手寫封裝一個函數(shù)（setStorage()、getStorage()、delStorage()），需要使用的時候進(jìn)行導(dǎo)入使用；
  • 這種做法太麻煩了，在 Vue3 中我們可以安裝一個插件，進(jìn)行配置，會自動幫我們實現(xiàn) Pinia 的持久化；

3.1、安裝 Pinia 持久化插件：

pnpm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate

3.2、將插件添加到 Pinia 的實例上

• 目標(biāo)文件：src/main.ts
• 代碼展示：

  import { createPinia } from 'pinia';
  import persist from 'pinia-plugin-persistedstate';
  
  const pinia = createPinia();
  
  pinia.use(persist);
  

3.3、在 Store 中使用

• 給 defineStore() 添加第三個參數(shù)（配置對象）；
• 代碼展示：

  import { defineStore } from 'pinia';
  import { ref } from 'vue';
  import type { User } from '@/types/user';
  
  export const useUserStore = defineStore('user', () => {
     const userInfo = ref<User>();
     
     const setUserInfo = (u: User) => {
         userInfo.value = u;
     };
     
     const delUSerInfo = () => {
         // undefined 是 window 身上的一個屬性，大廠里面不推薦直接用 undefined 給變量賦值
         // void 是用來創(chuàng)建 undefined，不管它后面跟個啥，得到的都是 undefined；
         userInfo.value = void 0;
         // 上面的代碼等價于下面這個，但是上面的代碼更好
         // userInfo.value = undefined;
     }
     
     return { userInfo, setUserInfo, delUserInfo }
  }, { persist: true });
  

3.4、驗證

• 在 App.vue 中隨便定義兩個按鈕；模擬 登錄和 退出登錄；
• 將 useUserStore 導(dǎo)入到 App.vue 中，調(diào)用 setUserInfo() 和 delUserInfo()，查看 localStorage；

四、倉庫(store)統(tǒng)一管理

• 倉庫(store)的統(tǒng)一管理分兩步：
  • pinia獨立維護(hù)；
  • 倉庫(store)統(tǒng)一導(dǎo)出；

4.1、pinia獨立維護(hù)

• 以往：
  • 初始化代碼都在 main.ts 中，倉庫代碼在 stores 文件夾中，代碼分散職能不單一；
• 優(yōu)化處理：
  • 由 stores 統(tǒng)一維護(hù)，在 stores/index.ts 中完成 pinia 的初始化，交付 main.ts 使用；
• 代碼展示：
  • 目標(biāo)文件：src/stores/index.ts；

    import { createPinia } from 'pinia';
    import persist from 'pinia-plugin-persistedstate';
    
    const pinia = createPinia();
    
    pinia.use(persist);
    
    export default pinia;
    

  • 目標(biāo)文件：src/main.ts；

    import { createApp } from 'vue';
    import pinia from '@/stores';
    import App from './App.vue';
    
    const app = createApp(App);
    app.use(pinia);
    app.mount('#app');
    

4.2、倉庫(store)統(tǒng)一導(dǎo)出

• 以往：
  • 使用一個倉庫 import { useUSerStore } from '@/stores/user.ts'; 不同倉庫路徑不一致；
  • 在每次導(dǎo)入的時候，都需要使用不同的路徑，不方便；
• 優(yōu)化處理：
  • 由 stores/index.ts 統(tǒng)一導(dǎo)出，導(dǎo)入路徑統(tǒng)一 @/stores，而且倉庫維護(hù)在 src/stores/modules 中；
• 代碼展示：
  • 在 src/modules 下面有兩個模塊 user、cart 這兩個；
  • 目標(biāo)文件：src/stores/index.ts；

    import { createPinia } from 'pinia';
    import persist from 'pinia-plugin-persistedstate';
    
    const pinia = createPinia();
    
    pinia.use(persist);
    
    export default pinia;
    
    // import { useUserStore } from './modules/user';
    // import { useCartStore } from './modules/cart';
    // export { useUserStore, useCartStore };
    
    // 對上面的代碼進(jìn)行簡化處理
    
    // 將 user 模塊中的所有的按需導(dǎo)出 在當(dāng)前文件中進(jìn)行按需導(dǎo)出
    export * from './modules/user';
    export * from './modules/cart';
    

  • 在別的文件使用的時候，直接使用 import { xxx } from '@/store'; 進(jìn)行導(dǎo)入即可；

文章來源地址http://www.zghlxwxcb.cn/news/detail-845780.html

到了這里，關(guān)于前端開發(fā)小技巧 - 【Vue3 + TS】 - 在 TS + Vue3 中使用 Pinia，實現(xiàn) Pinia 的持久化，優(yōu)化Pinia（倉庫統(tǒng)一管理）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！