什么是 Pinia

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

Pinia 的優點

• 簡便，存儲和組件變得很類似，你可以輕松寫出優雅的存儲；
• 類型安全，通過類型推斷，可以提供自動完成的功能；
• vue devtools 支持，可以方便進行調試；
• Pinia 支持擴展，可以非常方便地通過本地存儲，事物等進行擴展；
• 模塊化設計，通過構建多個存儲模塊，可以讓程序自動拆分它們；
• 非常輕巧，只有大約 1kb 的大小；
• 服務器端渲染支持。

如何使用

使用 Pinia 非常簡單，你可以通過defineStore來簡單創建一個存儲管理。

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 下一次迭代可能會是什么樣子，結合了 Vuex 5 核心團隊討論中的許多想法。最終，我們意識到 Pinia 已經實現了我們在 Vuex 5 中想要的大部分內容，并決定實現它取而代之的是新的建議。

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

總結

如果你正在開發一個新項目，請毫不猶豫地選擇 pinia，這不僅僅是當下最好的選擇，也將會是未來最好的選擇。如果你喜歡 Composition API ，喜歡更簡潔的 api 操作，請一定要選擇 pinia。