vue3?配套推薦了pinia插件來替換了之前的vuex ,

本文將介紹pinia，讓你快速了解并使用pinia

0 1?

pinia介紹?

讀音：? pí ní yà? ? ? 皮 尼 亞

vuex的代替產(chǎn)品，尤大大也是強(qiáng)烈推薦

官網(wǎng)：https://pinia.vuejs.org/

Pinia 是 Vue 的專屬狀態(tài)管理庫，它允許你跨組件或頁面共享狀態(tài)。它和vuex的作用一樣都是做狀態(tài)管理的。

0 2

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

和vuex一樣，pinia也是vue2、vue3都支持。
1、拋棄了Mutations的操作，只有state、getters和actions.

極大地簡(jiǎn)化了狀態(tài)管理庫的使用，讓代碼編寫更加容易直觀。其實(shí)很多其他的狀態(tài)管理都是沒有Mutations的例如mobx

2、完全支持ts

3、代碼更加簡(jiǎn)潔

總結(jié)一下就是，不用很久vuex就會(huì)被替換。

0 3

pinia的使用

1. 安裝?

npm i pinia

2. 倉庫的定義

與 vuex 的不同之外，在每個(gè)模塊文件，都要定義倉庫；注：defineStore的第一個(gè)參數(shù)必須唯一

與vuex的變化：?

?1. state是一個(gè)函數(shù) ，函數(shù)中返回一個(gè)對(duì)象??

?2. 沒有了mutaions??

?3. getters 與 actions 中使用state的屬性?, 通過this 關(guān)鍵字

多模塊間的使用

注意：

const admin=adminStore();這句話必須在調(diào)用的時(shí)候執(zhí)行，不能在一開始就執(zhí)行

3.?倉庫的使用

main.js 中的配置

文件中使用 pinia的方法

pinia中狀態(tài)的修改

方法1：與vuex相對(duì)應(yīng)的，通過action來修改

方法2：直接修改

注意，

這里展示順便展示上個(gè)知識(shí)點(diǎn)遺留的問題，就是不能解構(gòu)，如果解構(gòu)了，就不能修改，變成一次性的了。

如果覺得每次都寫store.xxx很麻煩，官方還提供了方法。

方法3：利用storeToRefs直接修改

注意：

storeToRefs 就是把對(duì)象里面的所有值都轉(zhuǎn)化成ref對(duì)象，這樣上面就可以直接使用，但是下面再用的時(shí)候要.value

方法4：利用$patch修改

同時(shí)處理多個(gè)數(shù)據(jù)的時(shí)候性能比直接修改高性能高；

今天的分享結(jié)束，大家有了解pinia的使用了不，哈哈

視頻地址：https://www.bilibili.com/video/BV1ae4y147TM/