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

Pinia文檔有這么一段話：

Pinia 試圖盡可能接近 Vuex 的理念。它旨在測試 Vuex 下一次迭代的提案，并且取得了成功，因為我們目前有一個針對 Vuex 5 的開放 RFC，其 API 與 Pinia 使用的 API 非常相似。請注意，我（Eduardo），Pania 的作者，是 Vue.js 核心團(tuán)隊的一員，并積極參與了 Router 和 Vuex 等 API 的設(shè)計。我個人對這個項目的意圖是重新設(shè)計使用全局 Store 的體驗，同時保持 Vue 平易近人的哲學(xué)。我讓 Pania 的 API 與 Vuex 一樣接近，因為它不斷向前發(fā)展，以便人們可以輕松地遷移到 Vuex 或什至在未來融合兩個項目（在 Vuex 下）。

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

2、Pinia簡單上手

首先我們初始化一個vite+vue+ts工程

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

安裝pinia

pnpm i pinia

打開項目，編輯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)建一個store文件夾用來存放狀態(tài)管理，然后新建一個counter.ts，我們來做一個簡單的計數(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通過defineStore函數(shù)來創(chuàng)建一個store，它接收一個id用來標(biāo)識store，以及store選項

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

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

  return { count, increment }
})

接著我們在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的過程中可以發(fā)現(xiàn)自動補全是相當(dāng)優(yōu)秀

瀏覽器運行如下:

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

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

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

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

const countPlus_1 = useCounter.count++

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

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

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

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

const { count } = storeToRefs(useCounter)

3、使用體驗

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

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

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

您可能感興趣的文章: