VUE3.0---Pinia學習記錄

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

Pinia優勢

Pinia是一個全新的Vue狀態管理庫，是Vuex的代替者，尤雨溪強勢推薦

0. Vue2 和 Vue3 都能支持
1. 拋棄傳統的 Mutation ，只有 state, getter 和 action ，簡化狀態管理庫
2. 不需要嵌套模塊，符合 Vue3 的 Composition api，讓代碼扁平化
3. TypeScript支持
4. 代碼簡介，很好的代碼自動分割

Pinia 基本使用

初始化項目： npm init vite@latest

安裝Pinia: npm i pinia

掛載Pinia

 創建Store

 使用Store

解構store

當store中的多個參數需要被使用到的時候，為了更簡潔的使用這些變數，我們通常採用結構的方式一次性獲取所有的變數名

ES傳統方式解構(能獲取到值，但是不具有響應性)

Pinia解構方法：storeToRefs

Pinia修改數據狀態

簡單數據修改

簡單數據直接通過在方法中操作 store.屬性名 來修改

 多條數據修改

通過基礎數據修改方式去修改多條數據也是可行的，但是在 pinia 官網中，已經明確表示$patch 的方式是經過優化的，會加快修改速度，對性能有很大好處，所以在進行多條數據修改的時候，更推薦使用 $patch

$patch 方法可以接受兩個類型的參數，函數 和 對象

• $patch + 對象
• $patch + 函數： 通過函數方式去使用的時候，函數接受一個 state 的參數，state 就是 store 倉庫中的 state

通過action修改

• Store.actions中添加 changeState 方法

 組件方法調用 store.方法名

Pinia中的Getters

Pinia 中的 getter 和 Vue 中的計算屬性幾乎一樣，在獲取 State值之前做一些邏輯處理

0. getter 中的值有緩存特性，如果值沒有改變，多次使用也只會調用一次

   • 添加 getter方法

• 組件內多次調用

 1. getter 中不僅可以傳遞 state 直接改變數據狀態，還可以使用 this 來改變數據

store之間的相互調用

在 Pinia 中，可以在一個 store 中 import 另外一個 store ，然後通過調用引入 store 方法的形式，獲取引入 store 的狀態

• 新建 store

• 在原 store 中引入 allanStore，並獲取 moveList

• 組件中使用 mainStore.getAllanStoreList

總結

總得來說，Pinia 就是 Vuex 的替代版，可以更好的相容 Vue2，Vue3以及TypeScript。在Vuex的基礎上去掉了 Mutation，只保留了 state, getter和action。Pinia擁有更簡潔的語法， 扁平化的代碼編排，符合Vue3 的 Composition api

本文轉載於:

https://juejin.cn/post/7078281612013764616

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。