這篇文章主要介紹“Vue3狀態(tài)管理庫Pinia如何使用”，在日常操作中，相信很多人在Vue3狀態(tài)管理庫Pinia如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3狀態(tài)管理庫Pinia如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)是一家專業(yè)提供安順企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、網(wǎng)站設(shè)計、H5場景定制、小程序制作等業(yè)務(wù)。10年已為安順眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

什么是 Pinia

Pinia 與 Vuex 一樣，是作為 Vue 的“狀態(tài)存儲庫”，用來實現(xiàn) 跨頁面/組件形式的數(shù)據(jù)狀態(tài)共享。

在平時的開發(fā)過程中，Vue 組件之間可以通過 Props和 Events實現(xiàn)組件之間的消息傳遞，對于跨層級的組件也可以通過 EventBus來實現(xiàn)通信。但是在大型項目中，通常需要在瀏覽器 保存多種數(shù)據(jù)和狀態(tài)，而使用 Props/Events或者 EventBus是很難維護(hù)和擴(kuò)展的。所以才有了 Vuex 和 Pinia。

Pinia 為何能取代 Vuex

作為 Vue 開發(fā)者都知道，Vuex 作為 Vue 的老牌官方狀態(tài)庫，已經(jīng)和 Vue 一起存在了很長時間，為什么現(xiàn)在會被 Pinia 取代呢？

官方的說法主要是以下幾點：

• 取消 mutations。因為在大部分開發(fā)者眼中，mutations 只支持 同步修改狀態(tài)數(shù)據(jù)，而 actions雖然支持 異步，卻依然要在內(nèi)部調(diào)用 mutations 去修改狀態(tài)，無疑是非常繁瑣和多余的

• 所有的代碼都是 TypeScript 編寫的，并且所有接口都盡可能的利用了 TypeScript 的 類型推斷，而不像 Vuex 一樣需要自定義 TS 的包裝器來實現(xiàn)對 TypeScript 的支持

• 不像 Vuex 一樣需要在實例/Vue原型上注入狀態(tài)依賴，而是通過直接引入狀態(tài)模塊、調(diào)用 getter/actions 函數(shù)來完成狀態(tài)的更新獲取；并且因為自身對 TypeScript 的良好支持和類型推斷，開發(fā)者可以享受很優(yōu)秀的代碼提示

• 不需要預(yù)先注冊狀態(tài)數(shù)據(jù)，默認(rèn)情況下都是根據(jù)代碼邏輯自動處理的；并且可以在使用中隨時注冊新的狀態(tài)

• 沒有 Vuex 的 modules 嵌套結(jié)構(gòu)，所有狀態(tài)都是扁平化管理的。也可以理解為 pinia 注冊的狀態(tài)都類似 vuex 的 module，只是 pinia 不需要統(tǒng)一的入口來注冊所有狀態(tài)模塊

• 雖然是扁平化的結(jié)構(gòu)，但是依然支持 每個狀態(tài)之間的互相引用和嵌套

• 不需要 namespace 命名空間，得利于扁平化結(jié)構(gòu)，每個狀態(tài)在注冊時即使沒有聲明狀態(tài)模塊名稱，pinia 也會默認(rèn)對它進(jìn)行處理

總結(jié)一下就是：Pinia 在實現(xiàn) Vuex 全局狀態(tài)共享的功能前提下，改善了狀態(tài)存儲結(jié)構(gòu)，優(yōu)化了使用方式，簡化了 API 設(shè)計與規(guī)范；并且基于 TypeScript 的類型推斷，為開發(fā)者提供了良好的 TypeScript 支持與代碼提示。

如何使用

至于 Pinia 在項目中的安裝，大家應(yīng)該都知道，直接通過包管理工具安裝即可。

1. 注冊 Pinia 實例

以 Vue 3 項目為例，只需要在入口文件 main.ts中引入即可完成 Pinia 的注冊。

import { createApp } from 'vue'
import { createPinia } from 'pinia'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

當(dāng)然，因為支持 createApp 支持 鏈?zhǔn)秸{(diào)用，所以也可以直接寫成 createApp(App).use(createPinia()).mount('#app').

此時 createPinia()創(chuàng)建的是一個根實例，在 app.use的時候會在 app 中注入該實例，并且配置一個 app.config.globalProperties.$pinia也指向該實例。

2. 定義狀態(tài) Store

在注冊一個 Pinia 狀態(tài)模塊的時候，可以通過 defineStore方法創(chuàng)建一個 狀態(tài)模塊函數(shù)（之所以是函數(shù)，是因為后面調(diào)用的時候需要通過函數(shù)的形式獲取到里面的狀態(tài)）。

deineStore 函數(shù)的 TypeScript 定義如下：

function defineStore<Id, S, G, A>(id, options): StoreDefinition<Id, S, G, A>
function defineStore<Id, S, G, A>(options): StoreDefinition<Id, S, G, A>
function defineStore<Id, SS>(id, storeSetup, options?): StoreDefinition<Id, _ExtractStateFromSetupStore<SS>, _ExtractGettersFromSetupStore<SS>, _ExtractActionsFromSetupStore<SS>>

type Id = ID extends string
type storeSetup = () => SS
type options = Omit<DefineStoreOptions<Id, S, G, A>, "id"> | DefineStoreOptions<Id, S, G, A> | DefineSetupStoreOptions<Id, _ExtractStateFromSetupStore<SS>, _ExtractGettersFromSetupStore<SS>, _ExtractActionsFromSetupStore<SS>>

可以看到該函數(shù)最多接收 3個參數(shù)，但是我們最常用的一般都是第一種或者第二種方式。這里以 第一種方式例，創(chuàng)建一個狀態(tài)模塊函數(shù)：

// 該部分節(jié)選字我的開源項目 vite-vue-bpmn-process
import { defineStore } from 'pinia'
import { defaultSettings } from '@/config'
import { EditorSettings } from 'types/editor/settings'

const state = {
  editorSettings: defaultSettings
}

export default defineStore('editor', {
  state: () => state,
  getters: {
    getProcessDef: (state) => ({
      processName: state.editorSettings.processName,
      processId: state.editorSettings.processId
    }),
    getProcessEngine: (state) => state.editorSettings.processEngine,
    getEditorConfig: (state) => state.editorSettings
  },
  actions: {
    updateConfiguration(conf: Partial<EditorSettings>) {
      this.editorSettings = { ...this.editorSettings, ...conf }
    }
  }
})

其中的 options配置項包含三個部分：

• state：狀態(tài)的初始值，推薦使用的是一個 箭頭函數(shù)，方便進(jìn)行類型推斷

• getters：狀態(tài)的獲取，是一個對象格式；推薦配置為每個 getters 的對象屬性為 箭頭函數(shù)，方便進(jìn)行類型推斷；在使用時等同于獲取該函數(shù)處理后的 state 狀態(tài)結(jié)果；并且與 Vue 的計算屬性一樣，該方法也是惰性的，具有緩存效果

• actions：類似 Vue 中的 methods 配置項，支持異步操作，主要作用是 處理業(yè)務(wù)邏輯并更新狀態(tài)數(shù)據(jù)；另外，此時的 actions 是一個 函數(shù)集合對象，與 getters 不同的是 不建議使用箭頭函數(shù)。并且函數(shù)內(nèi)部的 this 就指向當(dāng)前 store 的 state。

注意：getters 的函數(shù)定義中 第一個參數(shù)就是當(dāng)前 store 的狀態(tài)數(shù)據(jù) state，而 actions 中的函數(shù)參數(shù)為 實際調(diào)用時傳遞的參數(shù)，可以傳遞多個，內(nèi)部通過 this 上下文直接訪問 state 并進(jìn)行更新。

3. 組件使用（配合 setup）

眾所周知，vue 3 最大的亮點之一就是 組合式API（Composition API），所以我們先以組件配合 setup 使用。

import { defineComponent, ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { EditorSettings } from 'types/editor/settings'
import editorStore from '@/store/editor'

export default defineComponent({
  setup(props) {
    const editor = editorStore()
    
    // 直接獲取 state 狀態(tài)
    const { editorSettings } = storeToRefs(editor)
    
    // 使用 computed
    const editorSettings = computed(() => editor.editorSettings)

    // getters
    const prefix = editor.getProcessEngine
    
    // 更新方式 1：調(diào)用 actions
    editorStore.updateConfiguration({})
    
    // 更新方式 2：直接改變 state 的值
    editorStore.editorSettings = {}
    
    // 更新方式 3：調(diào)用 $patch
    editorStore.$patch((state) => {
      state.editorSettings = {}
    })

    return {
      editorStore
    }
  }
})

這里對以上幾種處理方式進(jìn)行說明：

獲取值：

• 可以通過 解構(gòu)獲取 state 定義的數(shù)據(jù)，但是 解構(gòu)會失去響應(yīng)式，所以需要用 storeToRefs重新對其進(jìn)行響應(yīng)式處理

• 通過 computed計算屬性，好處是 可以對 state 中的狀態(tài)數(shù)據(jù)進(jìn)行組合

• 通過定義的 getters 方法來獲取值，這種方式獲取的結(jié)果本身就是 響應(yīng)式的，可以直接使用

更新值：

1. 首先是可以 直接改變 state 的狀態(tài)值，缺點是多次使用容易有重復(fù)代碼，且不好維護(hù)；也會影響代碼的可讀性

2. 通過定義的 actions更新，也算是推薦方法之一；在后續(xù)迭代和擴(kuò)展中，只需要維護(hù)好 store 中的代碼即可

3. $patch: 這個方式 可以接收一個對象或者函數(shù)，但是 推薦使用箭頭函數(shù)（函數(shù)參數(shù)為狀態(tài)數(shù)據(jù) state）；因為如果是對象，則需要根據(jù)新數(shù)據(jù)和當(dāng)前狀態(tài) 重建整個 state，增加了很多的性能損耗；而使用箭頭函數(shù)，其實就與 actions中的方式類似，可以 按代碼邏輯修改指定的狀態(tài)數(shù)據(jù)

4. 組件使用（沒有 setup）

而在傳統(tǒng)的 optionsAPI 模式的組件中（也沒有配置 setup），Pinia 也提供了與 Vuex 一致的 API：mapState，mapGetters，mapActions，另外還增加了 mapStores用來訪問所有已注冊的 store 數(shù)據(jù)，新增了 mapWritableState用來 定義可更新狀態(tài)；也因為 pinia 沒有 mutations，所以也取消了 mapMutations的支持。

mapGetters 也只是為了方便遷移 Vuex 的組件代碼，后面依然建議 使用 mapState 替換 mapGetters

<template>
	<div>
    <p>{{ settings }}</p>
    <p>{{ processEngine }}</p>
    <button @click="updateConfiguration({})">調(diào)用 action</button>
    <button @click="update">調(diào)用 mapWritableState</button>
  </div>
</template>
<script>
  import { defineComponent, ref, storeToRefs } from 'vue'
  import { mapState, mapActions, mapWritableState } from 'pinia'
  import editorStore from '@/store/editor'
  
  export default defineComponent({
    computed: {
      ...mapState(editorStore, {
        settings: 'editorSettings',
        processEngine: (state) => `This process engine is ${state.editorSettings.processEngine}`
      }),
      ...mapWritableState(editorStore, ['editorSettings'])
    },
    methods: {
      ...mapActions(editorStore, ['updateConfiguration'])，
      update() {
        this.editorSettings.processEngine = "xxx"
      }
    }
  })
</script>

mapStores 用來訪問 所有已注冊 store 狀態(tài)。假設(shè)我們除了上文定義的 editor，還定義了一個 id 為 modeler 的 store，則可以這么使用：

import editor from '@/store/editor'
import modeler from '@/store/modeler'
export default defineComponent({
  computed: {
    ...mapStores(editor, modeler)
  },
  methods: {
    async updateAll() {
      if (this.editorStore.processEngine === 'camunda') {
        await this.modelerStore.update()
      }
    }
  }
})

其中引用的所有 store，都可以通過 id + 'Store'的形式在 Vue 實例中訪問到。

5. 互相引用

因為 Pinia 本身是支持各個 store 模塊互相引用的，所以在定義的時候可以直接引用其他 store 的數(shù)據(jù)進(jìn)行操作。

例如我們這里根據(jù) editor store 創(chuàng)建一個 modeler store

import { defineStore } from 'pinia'
import editor from '@/store/editor'

export default defineStore('editor', {
  state: () => ({
    element: null,
    modeler: null
  }),
  actions: {
    updateElement(element) {
      const editorStore = editor()
      if (!editorStore.getProcessEngine) {
        editorStore.updateConfiguration({ processEngine: 'camunda' })
      }
      this.element = element
    }
  }
})

6. 脫離 store 模塊和組件使用

因為 Pinia 的每個 store 模塊都是依賴 vue 應(yīng)用和 pinia 根實例的，在組件內(nèi)部使用時因為 Vue 應(yīng)用和 pinia 根實例肯定都已經(jīng)是 注冊完成處于活動狀態(tài)中的，所以可以直接通過調(diào)用對應(yīng)的 store 狀態(tài)模塊函數(shù)即可。

但是在脫離 store 模塊與組件，直接在外部的純函數(shù)中使用時，則需要注意 store 狀態(tài)模塊函數(shù)的調(diào)用時機。

以官方的示例來看：

import { createRouter } from 'vue-router'
const router = createRouter({
  // ...
})

// ? 根據(jù)導(dǎo)入的順序，這將失敗
const store = useStore()

router.beforeEach((to, from, next) => {
  // 我們想在這里使用 store 
  if (store.isLoggedIn) next()
  else next('/login')
})

router.beforeEach((to) => {
  // ? 這將起作用，因為路由器在之后開始導(dǎo)航
   // 路由已安裝，pinia 也將安裝
  const store = useStore()

  if (to.meta.requiresAuth && !store.isLoggedIn) return '/login'
})

直接在js模塊的執(zhí)行中 直接調(diào)用是可能會報錯的，因為此時可能在 import router 的時候 還沒有調(diào)用 createApp 和 createPinia 創(chuàng)建對應(yīng)的應(yīng)用實例和 pinia 根實例，所以無法使用。

而在路由導(dǎo)航的攔截器中使用時，因為 路由攔截觸發(fā)時，應(yīng)用和 pinia 根實例肯定已經(jīng)全部實例化完畢，才可以正常使用。

所以 如果是在外部的 hooks 函數(shù)或者 utils 工具函數(shù)等純函數(shù)模塊中使用 store 數(shù)據(jù)時，最好是定義一個函數(shù)方法導(dǎo)出，在組件或者 store 模塊中調(diào)用該方法，保證此時能正確執(zhí)行

到此，關(guān)于“Vue3狀態(tài)管理庫Pinia如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁題目：Vue3狀態(tài)管理庫Pinia如何使用
標(biāo)題URL：http://chinadenli.net/article44/jeiehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站導(dǎo)航、電子商務(wù)、軟件開發(fā)、網(wǎng)站制作、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)