Pinia進階setup函數式寫法封裝到企業(yè)項目

更新時間：2022年07月04日 10:37:09 作者：南山種子外賣跑手

這篇文章主要為大家介紹了Pinia進階setup函數式寫法封裝到企業(yè)項目實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

開場

Hello大家好，相信在座各位假如使用Vue生態(tài)開發(fā)項目情況下，對Pinia狀態(tài)管理庫應該有所聽聞或正在使用，假如還沒接觸到Pinia，這篇文章可以幫你快速入門，并如何在企業(yè)項目中更優(yōu)雅封裝使用。

本文先給大家闡述如何去理解、使用Pinia，最后講怎樣把Pinia集成到工程中，適合大多數讀者，至于研讀Pinia的源碼等進階科普，會另外開一篇文章細述。另外，本文的所有demo，都專門開了個GitHub項目來保存，有需要的同學可以拿下來實操一下。????

認識Pinia

Pinia讀音：/pi?nj?/，是Vue官方團隊推薦代替Vuex的一款輕量級狀態(tài)管理庫。它最初的設計理念是讓Vue Store擁有一款Composition API方式的狀態(tài)管理庫，并同時能支持 Vue2.x版本的Option API 和 Vue3版本的setup Composition API開發(fā)模式，并完整兼容Typescript寫法（這也是優(yōu)于Vuex的重要因素之一），適用于所有的vue項目。

比起Vuex，Pinia具備以下優(yōu)點：

完整的 TypeScript 支持：與在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
極其輕巧(體積約 1KB)
store 的 action 被調度為常規(guī)的函數調用，而不是使用 dispatch 方法或 MapAction 輔助函數，這在 Vuex 中很常見
支持多個Store
支持 Vue devtools、SSR 和 webpack 代碼拆分

Pinia與Vuex代碼分割機制

上述的Pinia輕量有一部分體現(xiàn)在它的代碼分割機制中。

舉個例子：某項目有3個store「user、job、pay」，另外有2個路由頁面「首頁、個人中心頁」，首頁用到job store，個人中心頁用到了user store，分別用Pinia和Vuex對其狀態(tài)管理。

先看Vuex的代碼分割： 打包時，vuex會把3個store合并打包，當首頁用到Vuex時，這個包會引入到首頁一起打包，最后輸出1個js chunk。這樣的問題是，其實首頁只需要其中1個store，但其他2個無關的store也被打包進來，造成資源浪費。

Pinia的代碼分割： 打包時，Pinia會檢查引用依賴，當首頁用到job store，打包只會把用到的store和頁面合并輸出1個js chunk，其他2個store不耦合在其中。Pinia能做到這點，是因為它的設計就是store分離的，解決了項目的耦合問題。

Pinia的常規(guī)用法

事不宜遲，直接開始使用Pinia「本文默認使用Vue3的setup Composition API開發(fā)模式」。

假如你對Pinia使用熟悉，可以略過這part

1. 安裝

yarn add pinia
# or with npm
npm install pinia

2. 掛載全局實例

import { createPinia } from 'pinia'
app.use(createPinia())

3. 創(chuàng)建第一個store

在src/store/counterForOptions.ts創(chuàng)建你的store。定義store模式有2種：

使用options API模式定義，這種方式和vue2的組件模型形式類似，也是對vue2技術棧開發(fā)者較為友好的編程模式。

import { defineStore } from 'pinia';
// 使用options API模式定義
export const useCounterStoreForOption = defineStore('counterForOptions', {
  // 定義state
  state: () => {
    return { count1: 1 };
  },
  // 定義action
  actions: {
    increment() {
      this.count1++;
    }
  },
  // 定義getters
  getters: {
    doubleCount(state) {
      return state.count1 * 2;
    }
  }
});

使用setup模式定義，符合Vue3 setup的編程模式，讓結構更加扁平化，個人推薦推薦使用這種方式。

import { ref } from 'vue';
import { defineStore } from 'pinia';
// 使用setup模式定義
export const useCounterStoreForSetup = defineStore('counterForSetup', () =&gt; {
  const count = ref&lt;number&gt;(1);
  function increment() {
    count.value++;
  }
  function doubleCount() {
    return count.value * 2;
  }
  return { count, increment, doubleCount };
});

上面2種定義方式效果都是一樣的，我們用defineStore方法定義一個store，里面分別定義1個count的state，1個increment action 和1個doubleCount的getters。其中state是要共享的全局狀態(tài)，而action則是讓業(yè)務方調用來改變state的入口，getters是獲取state的計算結果。

之所以用第一種方式定義是還要額外寫getters、action關鍵字來區(qū)分，是因為在options API模式下可以通過mapState()、mapActions()等方法獲取對應項；但第二種方式就可以直接獲取了（下面會細述）。

4. 業(yè)務組件對store的調用

在src/components/PiniaBasicSetup.vue目錄下創(chuàng)建個組件。

<script setup lang="ts" name="component-PiniaBasicSetup">
import { storeToRefs } from 'pinia';
import { useCounterStoreForSetup } from '@/store/counterForSetup';
// setup composition API模式
const counterStoreForSetup = useCounterStoreForSetup();
const { count } = storeToRefs(counterStoreForSetup);
const { increment, doubleCount } = counterStoreForSetup;
</script>
<template>
  <div class="box-styl">
    <h2>Setup模式</h2>
    <p class="section-box">
      Pinia的state: count = <b>{{ count }}</b>
    </p>
    <p class="section-box">
      Pinia的getters: doubleCount() = <b>{{ doubleCount() }}</b>
    </p>
    <div class="section-box">
      <p>Pinia的action: increment()</p>
      <button @click="increment">點我</button>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .box-styl {
    margin: 10px;
    .section-box {
      margin: 20px auto;
      width: 300px;
      background-color: #d7ffed;
      border: 1px solid #000;
    }
  }
</style>

Pinia在setup模式下的調用機制是先install再調用。
install這樣寫： const counterStoreForSetup = useCounterStoreForSetup();，其中 useCounterStoreForSetup就是你定義store的變量；
調用就直接用 counterStoreForSetup.xxx（xxx包括：state、getters、action）就好。
代碼中獲取state是用了解構賦值，為了保持state的響應式特性，需要用storeToRefs進行包裹。

兼容Vue2的Options API調用方式

<script lang="ts">
import { mapState, mapActions } from 'pinia';
import { useCounterStoreForOption } from '@/store/counterForOptions';
// setup composition API模式
export default {
  name: 'component-PiniaBasicOptions',
  computed: {
    // 獲取state和getters
    ...mapState(useCounterStoreForOption, ['count', 'doubleCount'])
  },
  methods: {
    // 獲取action
    ...mapActions(useCounterStoreForOption, {
      increment: 'increment',
      reset: 'reset'
    })
  }
};
</script>
<template>
  <div class="box-styl">
    <h2>Options模式</h2>
    <p class="section-box">
      Pinia的state: count = <b>{{ this.count }}</b>
    </p>
    <p class="section-box">
      Pinia的getters: doubleCount() = <b>{{ this.doubleCount }}</b>
    </p>
    <div class="section-box">
      <p>Pinia的action: increment()</p>
      <button @click="this.increment">點我</button>
    </div>
    <div class="section-box">
      <p>Pinia的action: reset()</p>
      <button @click="this.reset">點我</button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.box-styl {
  margin: 10px;
  .section-box {
    margin: 20px auto;
    width: 300px;
    background-color: #d7ffed;
    border: 1px solid #000;
  }
}
</style>

5. 良好的編程習慣

state的改變交給action去處理： 上面例子，counterStoreForSetup有個pinia實例屬性叫$state是可以直接改變state的值，但不建議怎么做。一是難維護，在組件繁多情況下，一處隱蔽state更改，整個開發(fā)組幫你排查；二是破壞store封裝，難以移植到其他地方。所以，為了你的聲譽和安全著想，請停止游離之外的coding????。

用hook代替pinia實例屬性： install后的counterStoreForSetup對象里面，帶有不少$開頭的方法，其實這些方法大多數都能通過hook引入代替。

其他的想到再補充...

企業(yè)項目封裝攻略

1. 全局注冊機

重復打包問題

在上面的例子我們可以知道，使用store時要先把store的定義import進來，再執(zhí)行定義函數使得實例化。但是，在項目逐漸龐大起來后，每個組件要使用時候都要實例化嗎？在文中開頭講過，pinia的代碼分割機制是把引用它的頁面合并打包，那像下面的例子就會有問題，user被多個頁面引用，最后user store被重復打包。

為了解決這個問題，我們可以引入 ”全局注冊“ 的概念。做法如下：

創(chuàng)建總入口

在src/store目錄下創(chuàng)建一個入口index.ts，其中包含一個注冊函數registerStore()，其作用是把整個項目的store都提前注冊好，最后把所有的store實例掛到appStore透傳出去。這樣以后，只要我們在項目任何組件要使用pinia時，只要import appStore進來，取對應的store實例就行。

// src/store/index.ts
import { roleStore } from './roleStore';
import { useCounterStoreForSetup } from '@/store/counterForSetup';
import { useCounterStoreForOption } from '@/store/counterForOptions';
export interface IAppStore {
  roleStore: ReturnType&lt;typeof roleStore&gt;;
  useCounterStoreForSetup: ReturnType&lt;typeof useCounterStoreForSetup&gt;;
  useCounterStoreForOption: ReturnType&lt;typeof useCounterStoreForOption&gt;;
}
const appStore: IAppStore = {} as IAppStore;
/**
 * 注冊app狀態(tài)庫
 */
export const registerStore = () =&gt; {
  appStore.roleStore = roleStore();
  appStore.useCounterStoreForSetup = useCounterStoreForSetup();
  appStore.useCounterStoreForOption = useCounterStoreForOption();
};
export default appStore;

總線注冊

在src/main.ts項目總線執(zhí)行注冊操作：

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import { registerStore } from '@/store';
const app = createApp(App);
app.use(createPinia());
// 注冊pinia狀態(tài)管理庫
registerStore();
app.mount('#app');

業(yè)務組件內直接使用

// src/components/PiniaBasicSetup.vue
<script setup lang="ts" name="component-PiniaBasicSetup">
import { storeToRefs } from 'pinia';
import appStore from '@/store';
// setup composition API模式
const { count } = storeToRefs(appStore.useCounterStoreForSetup);
const { increment, doubleCount } = appStore.useCounterStoreForSetup;
</script>
<template>
  <div class="box-styl">
    <h2>Setup模式</h2>
    <p class="section-box">
      Pinia的state: count = <b>{{ count }}</b>
    </p>
    <p class="section-box">
      Pinia的getters: doubleCount() = <b>{{ doubleCount() }}</b>
    </p>
    <div class="section-box">
      <p>Pinia的action: increment()</p>
      <button @click="increment">點我</button>
    </div>
  </div>
</template>

打包解耦

到這里還不行，為了讓appStore實例與項目解耦，在構建時要把appStore抽取到公共chunk，在vite.config.ts做如下配置

export default defineConfig(({ command }: ConfigEnv) =&gt; {
  return {
    // ...其他配置
    build: {
      // ...其他配置
      rollupOptions: {
        output: {
          manualChunks(id) {
            // 將pinia的全局庫實例打包進vendor，避免和頁面一起打包造成資源重復引入
            if (id.includes(path.resolve(__dirname, '/src/store/index.ts'))) {
              return 'vendor';
            }
          }
        }
      }
    }
  };
});

經過這樣封裝后，pinia狀態(tài)庫得到解耦，最終的項目結構圖是這樣的：

2. Store組管理

場景分析

大家在項目中是否經常遇到某個方法要更新多個store的情況呢？例如：你要做個游戲，有3種職業(yè)「戰(zhàn)士、法師、道士」，另外，玩家角色有3個store來控制「人物屬性、裝備、技能」，頁面有個”轉職“按鈕，可以轉其他職業(yè)。當玩家改變職業(yè)時，3個store的state都要改變，怎么做呢？

方法1：在業(yè)務組件創(chuàng)建個函數，單點擊”轉職“時，獲取3個store并且更新它們的值。
方法2：抽象一個新pinia store，store里有個”轉職“的action，當玩家轉職時，響應這個action，在action更新3個store的值。

對比起來，無論從封裝還是業(yè)務解耦，明顯方法2更好。要做到這樣，這也得益于pinia的store獨立管理特性，我們只需要把抽象的store作為父store，「人物屬性、裝備、技能」3個store作為單元store，讓父store的action去管理自己的單元store。

組級Store創(chuàng)建

繼續(xù)上才藝，父store：src/store/roleStore/index.ts

import { defineStore } from 'pinia';
import { roleBasic } from './basic';
import { roleEquipment } from './equipment';
import { roleSkill } from './skill';
import { ROLE_INIT_INFO } from './constants';
type TProfession = 'warrior' | 'mage' | 'warlock';
// 角色組，匯聚「人物屬性、裝備、技能」3個store統(tǒng)一管理
export const roleStore = defineStore('roleStore', () =&gt; {
  // 注冊組內store
  const basic = roleBasic();
  const equipment = roleEquipment();
  const skill = roleSkill();
  // 轉職業(yè)
  function changeProfession(profession: TProfession) {
    basic.setItem(ROLE_INIT_INFO[profession].basic);
    equipment.setItem(ROLE_INIT_INFO[profession].equipment);
    skill.setItem(ROLE_INIT_INFO[profession].skill);
  }
  return { basic, equipment, skill, changeProfession };
});

單元Store

3個單元store：

人物屬性
裝備
技能

業(yè)務組件調用

<script setup lang="ts" name="component-StoreGroup">
import appStore from '@/store';
</script>
<template>
  <div class="box-styl">
    <h2>Store組管理</h2>
    <div class="section-box">
      <p>
        當前職業(yè)： <b>{{ appStore.roleStore.basic.basic.profession }}</b>
      </p>
      <p>
        名字： <b>{{ appStore.roleStore.basic.basic.name }}</b>
      </p>
      <p>
        性別： <b>{{ appStore.roleStore.basic.basic.sex }}</b>
      </p>
      <p>
        裝備： <b>{{ appStore.roleStore.equipment.equipment }}</b>
      </p>
      <p>
        技能： <b>{{ appStore.roleStore.skill.skill }}</b>
      </p>
      <span>轉職：</span>
      <button @click="appStore.roleStore.changeProfession('warrior')">
        戰(zhàn)士
      </button>
      <button @click="appStore.roleStore.changeProfession('mage')">法師</button>
      <button @click="appStore.roleStore.changeProfession('warlock')">
        道士
      </button>
    </div>
  </div>
</template>
<style lang="less" scoped>
.box-styl {
  margin: 10px;
  .section-box {
    margin: 20px auto;
    width: 300px;
    background-color: #d7ffed;
    border: 1px solid #000;
  }
}
</style>

效果

落幕

磨刀不誤砍柴工，對于一個項目來講，好的狀態(tài)管理方案在當中發(fā)揮重要的作用，不僅能讓項目思路清晰，而且便于項目日后維護和迭代。

項目demo https://github.com/JohnnyZhangQiao/pinia-use

以上就是Pinia進階setup函數式寫法封裝到企業(yè)項目的詳細內容，更多關于Pinia setup函數式封裝的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

Vue簡化用戶查詢/添加功能的實現(xiàn)
本文主要介紹了Vue簡化用戶查詢/添加功能的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-01-01
vue日期時間工具類詳解
這篇文章主要為大家詳細介紹了vue日期時間工具類，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
創(chuàng)建Vue項目以及引入Iview的方法示例
這篇文章主要介紹了創(chuàng)建Vue項目以及引入Iview的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
C#實現(xiàn)將一個字符轉換為整數
下面小編就為大家分享一篇C#實現(xiàn)將一個字符轉換為整數，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結構，el-tree組件中filter-node-method事件便可以實現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下
2022-04-04
vue3+vite應用中添加sass預處理器問題
這篇文章主要介紹了vue3+vite應用中添加sass預處理器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue使用vue-draggable的全過程
這篇文章主要介紹了vue使用vue-draggable的全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
完美解決vue 項目開發(fā)越久 node_modules包越大的問題
這篇文章主要介紹了vue 項目開發(fā)越久 node_modules包越大的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
electron-vue開發(fā)環(huán)境內存泄漏問題匯總
這篇文章主要介紹了electron-vue開發(fā)環(huán)境內存泄漏問題匯總，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
Vue3中emit傳值的具體使用
Emit是Vue3中另一種常見的組件間傳值方式,它通過在子組件中觸發(fā)事件并將數據通過事件參數傳遞給父組件來實現(xiàn)數據傳遞,本文就來介紹一下Vue3 emit傳值,感興趣的可以了解一下
2023-12-12