Pinia 與 Vuex 一樣，是作為 Vue 的“狀態(tài)存儲庫”，用來實現(xiàn) 跨頁面/組件 形式的數(shù)據(jù)狀態(tài)共享。它允許你跨組件或頁面共享狀態(tài)。如果你熟悉組合式 API 的話，你可能會認為可以通過一行簡單的 export const state = reactive({}) 來共享一個全局狀態(tài)。
當該數(shù)據(jù)、方法在很多地方都需要使用或需要通過頁面保存的數(shù)據(jù)，如顯示在導航欄中用戶信息，一個多步驟表單頁面等，這時我們就可以使用Store了。
Pinia 的主要特點：
- 簡單易用：Pinia 的 API 簡潔明了，易于學習和使用。它提供了一些基本的操作方法，如設置狀態(tài)、獲取狀態(tài)、刪除狀態(tài)等。
- 適用于 Vue 3：Pinia 是專門為 Vue 3 設計的，它充分利用了 Vue 3 的新特性，如 Composition API、Teleport 等。
- 可擴展性：Pinia 是一個可擴展的狀態(tài)管理庫，你可以根據(jù)自己的需求來添加更多的功能和操作方法。
- 持久化支持：Pinia 支持狀態(tài)持久化，你可以輕松地將狀態(tài)保存到本地存儲中，并在需要時恢復狀態(tài)。
- 插件化：Pinia 支持插件化，你可以通過插件來添加更多的功能，如日志記錄、狀態(tài)監(jiān)控等。
如何使用：
- 安裝 Pinia：使用 npm 或 yarn 安裝 Pinia 庫。
- 創(chuàng)建存儲：在 Vue 應用中創(chuàng)建一個存儲對象，用于存儲所有共享狀態(tài)。
- 設置狀態(tài)：使用 defineState 方法來定義狀態(tài)，并使用 setup 方法將狀態(tài)注入到組件中。
- 操作狀態(tài)：使用 useStore 鉤子函數(shù)來獲取存儲對象，并使用其提供的方法來操作狀態(tài)。
- 持久化狀態(tài)：使用 persist 插件來將狀態(tài)保存到本地存儲中，并在需要時恢復狀態(tài)。
1.安裝
npm install pinia
2.定義
/ stores/counter.js
import { defineStore } from 'pinia'
//defineStore 接受一個 id，不同數(shù)據(jù)源的 id 必須是不同的
export const useCounterStore = defineStore('counter', {
//相當于data，數(shù)據(jù)
state: () => {
return { count: 0 }
},
//相當于methods，方法
actions: {
increment() {
this.count++
},
},
//相當于computed，計算屬性
getters: {
getCount(state) {
// 自動完成!
return state.count
},
},
})
在上面的代碼中，我們通過 defineStore 方法創(chuàng)建了一個名為 counter 的 Store。其中，id 是一個唯一的標識符，可以用來跨 Store 之間進行通信。
在 Store 中，我們定義了一個名為 count 的狀態(tài)，以及名為 increment 的操作。這個操作可以通過 this 來訪問當前 Store 中的狀態(tài)，從而實現(xiàn)對狀態(tài)的變更。
我們還定義了一個名為 getCount 的 getter，它可以返回 count 的值。
參數(shù)：
-
state：狀態(tài)的初始值，推薦使用的是一個 箭頭函數(shù)，方便進行類型推斷。
-
getters：狀態(tài)的獲取，是一個對象格式；推薦配置為每個 getters 的對象屬性為 箭頭函數(shù)，方便進行類型推斷；在使用時等同于獲取該函數(shù)處理后的 state 狀態(tài)結果；并且與 Vue 的計算屬性一樣，該方法也是惰性的，具有緩存效果。
-
actions：類似 Vue 中的 methods 配置項，支持異步操作，主要作用是 處理業(yè)務邏輯并更新狀態(tài)數(shù)據(jù)；另外，此時的 actions 是一個 函數(shù)集合對象，與 getters 不同的是 不建議使用箭頭函數(shù)。并且函數(shù)內部的 this 就指向當前 store 的 state。
3.使用
然后你在一個組件中使用它：文章來源：http://www.zghlxwxcb.cn/news/detail-809274.html
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
counter.count++
// 或使用 action
counter.increment()
<template>
{{counter.getCount}}
</template>
在上面的代碼中，我們通過 useCounterStore 方法獲取到了 useCounterStore Store 的實例。然后我們可以通過 counter.count 訪問到當前 Store 中的狀態(tài)，以及通過 counter.increment() 和 counter.getCount() 來調用相應的操作。文章來源地址http://www.zghlxwxcb.cn/news/detail-809274.html
pinia和vuex的對比
| 特性 | Vuex (Vue2) | Pinia (Vue3) |
|---|---|---|
| 數(shù)據(jù)存儲 | State 存儲在 Store 中 | State 存儲在 Store 中 |
| 數(shù)據(jù)修改 | commit/mutation | action |
| 響應式 | 使用 Vue 響應式系統(tǒng)實 | 使用 Vue 3 的響應式系統(tǒng)實現(xiàn) |
| 數(shù)據(jù)獲取 | getters | getters |
| 模塊化 | 模塊按照功能劃分，每個模塊有自己的 state、mutation、action 和 getter | 模塊按照功能劃分，每個模塊有自己的 state、action 和 getter |
| TypeScript 支持 | 需要額外安裝 @vue/cli-plugin-typescript 插件，并在 store 中進行類型定義 | 內置 TypeScript 支持，使用起來更加方便 |
到了這里，關于vue3中狀態(tài)管理庫pinia的安裝和使用方法介紹及和vuex的區(qū)別的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
