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

Pinia優勢

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

1. Vue2 和 Vue3 都能支援
2. 抛棄傳統的 Mutation ，隻有 state, getter 和 action ，簡化狀态管理庫
3. 不需要嵌套子產品，符合 Vue3 的 Composition api，讓代碼扁平化
4. TypeScript支援
5. 代碼簡介，很好的代碼自動分割

Pinia 基本使用

初始化項目： npm init vite@latest

安裝Pinia: npm i pinia

挂載Pinia

image.png

建立Store

image.png

使用Store

image.png

解構store

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

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

image.png

Pinia解構方法：storeToRefs

image.png

Pinia修改資料狀态

簡單資料修改

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

image.png

多條資料修改

通過基礎資料修改方式去修改多條資料也是可行的，但是在 pinia 官網中，已經明确表示patch

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

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

  

  image.png

通過action修改

• Store.actions中添加 changeState 方法

  

  image.png
• 元件方法調用 store.方法名

  

  image.png

Pinia中的Getters

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

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

1. 添加 getter方法

   

   image.png
2. 元件内多次調用

   

   image.png

   

   image.png

• getter 中不僅可以傳遞 state 直接改變資料狀态，還可以使用 this 來改變資料

  

  image.png

store之間的互相調用

• 建立 store

  

  image.png
• 在原 store 中引入 allanStore，并擷取 moveList

  

  image.png
• 元件中使用 mainStore.getAllanStoreList

  

  image.png

總結