1、Pinia是什么

Pinia是一個(gè)vue的狀態(tài)管理方案，是vuex團(tuán)隊(duì)成員開(kāi)發(fā)，實(shí)現(xiàn)了很多vuex5的提案，更加地輕量化且有devtools的支持

vuex4一直被人詬病對(duì)于typescript的支持不良好，vuex5也遲遲未來(lái)

所以有了pinia的出現(xiàn)

相較于vuex：

• pinia無(wú)需創(chuàng)建復(fù)雜的包裝器來(lái)支持typescript，對(duì)于typescript類(lèi)型判斷是天然支持的，享受ide帶來(lái)的自動(dòng)補(bǔ)全，減少開(kāi)發(fā)的心智負(fù)擔(dān)，減少vue開(kāi)發(fā)過(guò)程中的面向字符串編程
• 減去了mutations的概念，只保留state,getters和anctions三個(gè)概念，減少代碼冗余
• 無(wú)需手動(dòng)添加store，創(chuàng)建的store會(huì)在使用時(shí)自動(dòng)添加
• 沒(méi)有模塊module的概念，不用面對(duì)一個(gè)store下嵌套著許多模塊，使用單文件store（有點(diǎn)類(lèi)似redux/toolkit的一個(gè)reducer），可以直接導(dǎo)入其他store使用
  

Pinia文檔有這么一段話：

Pinia 試圖盡可能接近 Vuex 的理念。 它旨在測(cè)試 Vuex 下一次迭代的提案，并且取得了成功，因?yàn)槲覀兡壳坝幸粋€(gè)針對(duì) Vuex 5 的開(kāi)放 RFC，其 API 與 Pinia 使用的 API 非常相似。 請(qǐng)注意，我（Eduardo），Pania 的作者，是 Vue.js 核心團(tuán)隊(duì)的一員，并積極參與了 Router 和 Vuex 等 API 的設(shè)計(jì)。 我個(gè)人對(duì)這個(gè)項(xiàng)目的意圖是重新設(shè)計(jì)使用全局 Store 的體驗(yàn)，同時(shí)保持 Vue 平易近人的哲學(xué)。 我讓 Pania 的 API 與 Vuex 一樣接近，因?yàn)樗粩嘞蚯鞍l(fā)展，以便人們可以輕松地遷移到 Vuex 或什至在未來(lái)融合兩個(gè)項(xiàng)目（在 Vuex 下）。

所以現(xiàn)在學(xué)習(xí)Pinia，相當(dāng)于提前學(xué)習(xí)Vuex5就是說(shuō)

2、Pinia簡(jiǎn)單上手

首先我們初始化一個(gè)vite+vue+ts工程

pnpm create vite pinia-demo -- --template vue-ts

安裝pinia

pnpm i pinia

打開(kāi)項(xiàng)目，編輯src目錄下的mian.ts文件，引入Pinia

// main.ts
​
import { createApp } from 'vue'
import App from './App.vue'
​
import { createPinia } from 'pinia'
​
createApp(App).use(createPinia()).mount('#app')

在src目錄下創(chuàng)建一個(gè)store文件夾用來(lái)存放狀態(tài)管理，然后新建一個(gè)counter.ts，我們來(lái)做一個(gè)簡(jiǎn)單的計(jì)數(shù)器狀態(tài)應(yīng)用

import { defineStore } from 'pinia'
​
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Pinia通過(guò)defineStore函數(shù)來(lái)創(chuàng)建一個(gè)store，它接收一個(gè)id用來(lái)標(biāo)識(shí)store，以及store選項(xiàng)

我們也可以使用一個(gè)回調(diào)函數(shù)來(lái)返回options，回調(diào)函數(shù)體內(nèi)的寫(xiě)法類(lèi)似vue的setup()寫(xiě)法，比如上面的定義可以寫(xiě)成

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function doubleCount() {
    return count.value * 2
  }
  function increment() {
    count.value++
  }
​
  return { count, increment }
})

接著我們?cè)?code>App.vue中使用store

<script setup lang="ts">
import { useCounterStore } from './store/counter'
const useCounter = useCounterStore()
</script>
​
<template>
  <h2>{{ useCounter }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">increment</button>
</template>
​
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在使用Pinia的過(guò)程中可以發(fā)現(xiàn)自動(dòng)補(bǔ)全是相當(dāng)優(yōu)秀

瀏覽器運(yùn)行如下:

打開(kāi)開(kāi)發(fā)者工具查看vue devtool

vue devtool支持對(duì)Pinia狀態(tài)的增刪改查！

Pinia有多種對(duì)狀態(tài)的修改方式:

• 使用actions，如上面所示
• 直接在狀態(tài)上修改

const countPlus_1 = useCounter.count++

使用store的$patch函數(shù)，支持選項(xiàng)和回調(diào)函數(shù)兩種寫(xiě)法，回調(diào)函數(shù)適用于狀態(tài)為數(shù)組或其他之類(lèi)的需要調(diào)用狀態(tài)方法進(jìn)行修改

const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })

const countPlus_3 = useCounter.$patch((state) => state.count++)

對(duì)狀態(tài)的結(jié)構(gòu)需要使用StoreToRefs函數(shù)

const { count } = storeToRefs(useCounter)

3、使用體驗(yàn)

Pinia的學(xué)習(xí)和使用是相當(dāng)友好的，看一遍官方文檔就能上手，在上手過(guò)程中可以明顯地感受到相對(duì)于vuex更加快捷，編碼體驗(yàn)優(yōu)秀。

狀態(tài)管理對(duì)于小項(xiàng)目來(lái)說(shuō)更注重于方便和快捷（甚至可以不想需要），所以像vuex是稍微有些復(fù)雜了，像vue3出beta的時(shí)候就有人說(shuō)可以使用組合式api比如provide跟inject配合來(lái)替代vuex，所以Pinia這個(gè)輕量級(jí)狀態(tài)管理方案的出現(xiàn)是相當(dāng)及時(shí)的。

到此這篇關(guān)于Vue狀態(tài)管理之使用Pinia代替Vuex的文章就介紹到這了,更多相關(guān)使用Pinia代替Vuex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論