什么是 Pinia

如果你之前使用過 vuex 進(jìn)行狀態(tài)管理的話，那么 pinia 就是一個(gè)類似的插件。它是最新一代的輕量級(jí)狀態(tài)管理插件。按照尤雨溪的說法，vuex 將不再接收新的功能，建議將 Pinia 用于新的項(xiàng)目。

Pinia 的優(yōu)點(diǎn)

• 簡便，存儲(chǔ)和組件變得很類似，你可以輕松寫出優(yōu)雅的存儲(chǔ)；
• 類型安全，通過類型推斷，可以提供自動(dòng)完成的功能；
• vue devtools 支持，可以方便進(jìn)行調(diào)試；
• Pinia 支持?jǐn)U展，可以非常方便地通過本地存儲(chǔ)，事物等進(jìn)行擴(kuò)展；
• 模塊化設(shè)計(jì)，通過構(gòu)建多個(gè)存儲(chǔ)模塊，可以讓程序自動(dòng)拆分它們；
• 非常輕巧，只有大約 1kb 的大??；
• 服務(wù)器端渲染支持。

如何使用

使用 Pinia 非常簡單，你可以通過defineStore來簡單創(chuàng)建一個(gè)存儲(chǔ)管理。

yarn add pinia@next

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

import {defineStore} from 'pinia'

export const useTodoStore = defineStore({
    id: "todo",
    state:()=>({count:0,title:"test",done:false})
})

export default defineComponent({
  setup() {
    const todo = useTodoStore()

    return {
      // gives access only to specific state
      state: computed(() => todo.title),
    }
  },
})

同 vuex 的比較

Pinia 最初是為了探索 Vuex 下一次迭代可能會(huì)是什么樣子，結(jié)合了 Vuex 5 核心團(tuán)隊(duì)討論中的許多想法。最終，我們意識(shí)到 Pinia 已經(jīng)實(shí)現(xiàn)了我們?cè)?Vuex 5 中想要的大部分內(nèi)容，并決定實(shí)現(xiàn)它取而代之的是新的建議。

與 Vuex 相比，Pinia 提供了一個(gè)更簡單的 API，具有更少的操作，提供了 Composition-API 風(fēng)格的 API，最重要的是，在與 TypeScript 一起使用時(shí)具有可靠的類型推斷支持。

總結(jié)

如果你正在開發(fā)一個(gè)新項(xiàng)目，請(qǐng)毫不猶豫地選擇 pinia，這不僅僅是當(dāng)下最好的選擇，也將會(huì)是未來最好的選擇。如果你喜歡 Composition API ，喜歡更簡潔的 api 操作，請(qǐng)一定要選擇 pinia。