1. 首頁 > 生活百科 > >

vue3中pinia的使用總結

生活百科

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

  1. 可以對Vue2和Vue3做到很好的支持，也就是老項目也可以使用Pinia 。
  2. 拋棄了Mutations的操作 ， 只有state、getters和actions.極大的簡化了狀態管理庫的使用，讓代碼編寫更加容易直觀 。
  3. 不需要嵌套模塊，符合Vue3的Composition api ，讓代碼更加扁平化 。
  4. 完整的TypeScript支持 。Vue3版本的一大優勢就是對TypeScript的支持 ， 所以Pinia也做到了完整的支持 。如果你對Vuex很熟悉的化，一定知道Vuex對TS的語法支持不是完整的（經常被吐槽） 。
  5. 代碼更加簡潔，可以實現很好的代碼自動分割 。Vue2的時代，寫代碼需要來回翻滾屏幕屏幕找變量 ， 非常的麻煩 ， Vue3的Composition api完美了解決這個問題 。可以實現代碼自動分割，pinia也同樣繼承了這個優點 。
如果你說這五點有點太多了，記不住 ?？梢院唵慰偨YPinia的優勢就是，更加簡潔的語法，完美支持Vue3的Composition api 和 對TypesCcript的完美支持 。這些優勢和尤雨溪的強烈推薦，個人覺得很快Pinia就會完全取代Vuex，成為最適合Vue3的狀態管理庫 。
這里說一點哦，其實pinia的開發團隊，就是Vuex的開發團隊 。
Vue3環境安裝
明白了Pinia的優勢后，下一步我們就需要安裝開發環境了 。Pinia是Vue的狀態管理庫，所以需要先安裝Vue的項目環境 。這里需要說一下Pinia同時支持Vue2和Vue3，但這里我就用Vite來創建一個Vue3項目為例 。
使用Vite就需要先初始化vite ， 一條命令搞定 。
vue3中pinia的使用總結

文章插圖
如果是第一次安裝，會提示你安裝對應的packages
Pinia的安裝
安裝好Vue3的開發環境后 ， 就可以安裝Pinia狀態管理庫了 。安裝的方法依然是使用npm 來安裝 。
vue3中pinia的使用總結

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

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

文章插圖
這樣我們就在項目中引入了Pinia,也就是說我們可以在項目中使用它進行編程了 。
創建store狀態管理庫
引入Pinia后，就可以創建狀態管理庫了，也就是常說的Store 。直接在/src目錄下，新建一個store文件夾 。有了文件夾之后，再創建一個index.ts文件 。
這個文件里的代碼，我們一般只做三件事 。
  1. 定義狀態容器(倉庫)
  2. 修改容器(倉庫)中的 state
  3. 倉庫中的 action 的使用
明確了這四件事以后，我們來編寫代碼 。先來定義容器,這個寫法是固定的，你甚至可以在VSCode中定義一個代碼片段，以后用到的時候，直接可以生成這樣的代碼 。
因為這里是學習，所以我這里就從頭寫一下 。
vue3中pinia的使用總結

文章插圖
寫完這段代碼，你會感覺這個很像一個Vue的小組件，這也算是Pinia的一個優點
  • defineStore( )方法的第一個參數：相當于為容器起一個名字 。注意：這里的名字必須唯一，不能重復 。這個是官方特別說明的一個事情 。
  • defineStore( )方法的第二個參數：可以簡單理解為一個配置對象，里邊是對容器倉庫的配置說明 。當然這種說明是以對象的形式 。
  • state 屬性：用來存儲全局的狀態的，這里邊定義的，就可以是為SPA里全局的狀態了 。
  • getters屬性：用來監視或者說是計算狀態的變化的，有緩存的功能 。
  • actions屬性：對state里數據變化的業務邏輯，需求不同，編寫邏輯不同 。說白了就是修改state全局狀態數據的 。
如果你會Vuex的話，上面這些內容可能對你來說沒什么難度 。但如果你不會Vuex，現在只要知道這段代碼大概的意思就可以 ， 不用深究 。隨著我們學習的深入，你會有更具體的了解 。

推薦閱讀