vue3中pinia的使用總結(jié) _生活百科

pinia的簡介和優(yōu)勢：
Pinia是Vue生態(tài)里Vuex的代替者，一個全新Vue的狀態(tài)管理庫。在Vue3成為正式版以后，尤雨溪強勢推薦的項目就是Pinia 。那先來看看Pinia比Vuex好的地方，也就是Pinia的五大優(yōu)勢。

可以對Vue2和Vue3做到很好的支持，也就是老項目也可以使用Pinia 。
拋棄了Mutations的操作，只有state、getters和actions.極大的簡化了狀態(tài)管理庫的使用，讓代碼編寫更加容易直觀。
不需要嵌套模塊，符合Vue3的Composition api ，讓代碼更加扁平化。
完整的TypeScript支持。Vue3版本的一大優(yōu)勢就是對TypeScript的支持，所以Pinia也做到了完整的支持。如果你對Vuex很熟悉的化，一定知道Vuex對TS的語法支持不是完整的（經(jīng)常被吐槽）。
代碼更加簡潔，可以實現(xiàn)很好的代碼自動分割。Vue2的時代，寫代碼需要來回翻滾屏幕屏幕找變量，非常的麻煩，Vue3的Composition api完美了解決這個問題。可以實現(xiàn)代碼自動分割，pinia也同樣繼承了這個優(yōu)點。

如果你說這五點有點太多了，記不住。可以簡單總結(jié)Pinia的優(yōu)勢就是，更加簡潔的語法，完美支持Vue3的Composition api 和對TypesCcript的完美支持。這些優(yōu)勢和尤雨溪的強烈推薦，個人覺得很快Pinia就會完全取代Vuex，成為最適合Vue3的狀態(tài)管理庫。
這里說一點哦，其實pinia的開發(fā)團(tuán)隊，就是Vuex的開發(fā)團(tuán)隊。
Vue3環(huán)境安裝
明白了Pinia的優(yōu)勢后，下一步我們就需要安裝開發(fā)環(huán)境了。Pinia是Vue的狀態(tài)管理庫，所以需要先安裝Vue的項目環(huán)境。這里需要說一下Pinia同時支持Vue2和Vue3，但這里我就用Vite來創(chuàng)建一個Vue3項目為例。
使用Vite就需要先初始化vite，一條命令搞定。

文章插圖
【vue3中pinia的使用總結(jié)】如果是第一次安裝，會提示你安裝對應(yīng)的packages
Pinia的安裝
安裝好Vue3的開發(fā)環(huán)境后，就可以安裝Pinia狀態(tài)管理庫了。安裝的方法依然是使用npm 來安裝。

文章插圖
然后可以在package.json文件中查看pinia的版本
Pinia的使用步驟
(1). 在main.ts里面引入pinia:
安裝好Pinia后，需要作的第一件事就是在/src/main.ts里引入pinia 。這里我們直接使用import引入

文章插圖
引入后，通過createPinia( )方法，得到pinia的實例和掛載到Vue根實例上。為了方便你學(xué)習(xí)，這里直接給出main.ts的全部代碼。

文章插圖
這樣我們就在項目中引入了Pinia,也就是說我們可以在項目中使用它進(jìn)行編程了。
創(chuàng)建store狀態(tài)管理庫
引入Pinia后，就可以創(chuàng)建狀態(tài)管理庫了，也就是常說的Store 。直接在/src目錄下，新建一個store文件夾。有了文件夾之后，再創(chuàng)建一個index.ts文件。
這個文件里的代碼，我們一般只做三件事。