文章插圖
在vue3組件里面 讀取store數據
在vue文件中引入store，然后通過store得到store實例
文章插圖
文章插圖
文章插圖
Pinia改變狀態數據和注意事項
我在學習的時候發現了這樣一個坑，在這里也和大家分享一下 。希望小伙伴們不要踩坑 ?？聪旅娴拇a，我們是否可以簡化一點 。
文章插圖
我們可以把store進行結構，然后直接template中直接這樣讀出數據 。
文章插圖
這樣看似簡單，但通過解構的數據，只有一次作用，不是響應式數據（這就是我踩的坑了） 。也就是說當你改變數據狀態時 ， 解構的狀態數據不會發生變化 。我們這時候再點擊增加按鈕，可以看到只有沒結構的數據發生了變化 。
于是我開始查找官方文檔，顯然Pinia團隊也發現了這個問題 ， 提供了storeToRefs( )方法 。這個方法Pinia中，所以我們先用import引入 。
文章插圖
文章插圖
這時候再到瀏覽器中測試一下，就一切正常了 。補充：其實在Vuex中，直接解構數據也是不可以的 。
Pinia修改狀態數據的多種方式
1.普通方式修改數據
文章插圖
2.$patch修改數據(修改多條建議使用) $patch的方式是經過優化的，會加快修改速度 ， 對程序的性能有很大的好處
文章插圖
3.$patch加函數的方式修改數據（這種方法適合復雜數據的修改 ， 比如數組、對象的修改 。）
文章插圖
4.在actions中寫好邏輯 ， 在調用actions
如果你有一個修改的過程非常復雜，你可以先在store里，定義好actions中的函數 ， 然后在組件里再調用函數 。
文章插圖
在vue中使用
文章插圖
5.在pinia中使用Getters
Pinia中的Getter和Vue中的計算屬性幾乎一樣，就是在獲取State的值時作一些處理 。比如我們有這樣一個需求，就是在state里有有一個狀態數據是電話號碼，我們想輸出的時候把中間四位展示為****.這時候用getters就是非常不錯的選擇 。
文章插圖
在vue中使用它
文章插圖
Getters是有緩存特性的，現在我們的組件中調用多次 ， 但是在store倉庫中其實就調用了一次 。
6.this的使用
在actions里面是可以使用this的，其實在getters里面也是可以使用的，使用方式如下：
文章插圖
7.pinia中的store是可以相互調用的
文章插圖
以上就是對pinia使用的總結啦！
【vue3中pinia的使用總結】
推薦閱讀
- vue3的Async Components異步組件
- 中國十大歷史名城 中國歷史名城排名
- 中國海鮮城市前十排名是哪些 中國排名前十圖
- [CG從零開始] 5. 搞清 MVP 矩陣理論 + 實踐
- 微博發照片怎么改水印的位置我想把它放到中間
- 微博標怎么弄中間去（微博的水印怎么移到中間)
- 怎么把微博文字弄到中間（微博logo怎么移到中間)
- 怎么把微博的標志放到中間（微博右下角的標簽怎么移到中間)
- 手機微博怎么把水印移到中間（手機微博如何去水印)
- 發微博怎么把水印放到圖片中間啊（微博怎么不帶水印)