Vue3中Pinia的基本使用筆記
更新時間：2022年10月13日 09:20:52 作者：blackzjj
Pinia是一個全新的Vue狀態(tài)管理庫,是Vuex的代替者,尤雨溪強勢推薦,下面這篇文章主要給大家介紹了關于Vue3中Pinia的基本使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
什么是Pinia呢？
Pina開始于大概2019，是一個狀態(tài)管理的庫，用于跨組件、頁面進行狀態(tài)共享（這和Vuex、Redux一樣）,用起來像組合式API（Composition API）
Pinia和Vuex的區(qū)別
- PInia的最初是為了探索Vuex的下一次迭代會是什么樣子，結合了Vuex核心團隊討論中的許多想法；
- 最終，團隊意識到Pinia已經(jīng)實現(xiàn)了Vuex5中大部分內容，所以最終決定用Pinia來替代Vuex；
- 與Vuex相比，Pinia提供了一個更簡單的API，具有更少的儀式，提供了Composition-API風格的API
- 更重要的是，與TypeScript一起使用時具有可靠的類型推斷支持
與Vuex相比，Pinia很多的優(yōu)勢：
比如mutations不再存在：
- mutations最初是為devtools集成，但這不在是問題
- 他們經(jīng)常認為是非常冗長
更友好的TpeScipt支持，Vuex之前對Ts的支持很不友好
不在有modules的嵌套結構
- 你可以靈活使用每一個store，他們是通過扁平化的方式來相互使用的;
不在有命名空間的概念，不在需要記住他們的復雜關系
如何使用Pinia
1、安裝Pinia
- yarn add pinia
- npm install pinia
2、創(chuàng)建pinia文件
store文件里index.js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
3、main.js導入并引用
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
createApp(App).use(pinia).mount('#app')
4、pinia的狀態(tài)管理，不同狀態(tài)可以區(qū)分不同文件
//定義關于counter的store
import { defineStore } from ‘pinia'
//defineStore 是返回一個函數(shù) 函數(shù)命名最好有use前綴，根據(jù)函數(shù)來進行下一步操作
const useCounter = defineStore('counter',{
state: () => {
count:99
}
})
export default useCounter
5、調用pinia，獲取pinia狀態(tài)值，導入Counter.js,獲取Counter.js里面state.count
<template>
<div class="home">
<h2>Home View</h2>
<h2>count: {{ counterStore.count }}</h2>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
const counterStore = useCounter()
</script>
<style scoped>
</style>
注意：pinia解構出來的state也是可以調用，但會失去響應式，需要toRef或者pinia自帶storeToRefs
<template>
<div class="home">
<h2>Home View</h2>
<h2>count: {{ counterStore.count }}</h2>
<h2>count: {{ count }}</h2>
<button @click="incrementCount">count+1</button>
</div>
</template>
<script setup>
import { toRefs } from 'vue'
import { storeToRefs } from 'pinia'
import useCounter from '@/stores/counter';
const counterStore = useCounter()
// const { count } = toRefs(counterStore)
const { count } = storeToRefs(counterStore)
function incrementCount() {
counterStore.count++
}
</script>
<style scoped>
</style>
store的核心部分：state，getter，action
（相當于：data、computed、methods）
認識和定義State
state是store的核心部分，因為store是用來幫助我們管理狀態(tài)
操作State
1.讀取和寫入state：
默認情況下，可以通過store實例訪問狀態(tài)來直接讀取和寫入狀態(tài)；
``` const counterStore = useCounter() counterStore.counter++ counterStore.name = 'coderWhy' ```
2.重置State：
可以調用store上的$reset()方法將狀態(tài)重置到其初始值
const counterStore = useCounter() conterStore.$reset()
3.改變State
- 除了直接用store.counter++修改store，還可以調用$patch
- 它允許您使用部分‘state’對象同時應該多個修改
const counterStore = useCounter()
counterStore.$patch({
counter:100,
name:'kobe'
})
4.替換State
可以通過將其$state屬性設置為新對象替換Store的整個狀態(tài)
conterStore.$state = {
counter:1,
name:'why'
}
認識和定義Getters
Getters相當于Store的計算屬性：
- 它們可用defineStore()中的getters屬性定義
- getters中可以定義接受一個state作為參數(shù)的函數(shù)
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
doubleCounter(state){
return state.counter *2
}
}
})
訪問Store里getters方法
1.訪問當前store的getters：
const counterSotre = useCounter() console.log(counterStore.doublCounter)
2.我們可以使用this來訪問當前的store實例中getters
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
doubleCounter(state){
return state.counter *2
}
doubleCounterAdd(){
//this指向store
return this.doubleCounter +1
}
}
})
3.訪問其它store的getters
import useUser from ./user
const userStore = useUser()
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調用其它Store
doubleCounterUser(){
return this.doubleCounter + userStore.umu
}
}
})
4.通過getters可以返回一個函數(shù)，可以傳參數(shù)
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
}
})
const StoreConter = useCounter(); //傳參 StoreCounter.doublCounter(111)
認識和定義Actions
Actions 相當于組件中的methods，可以使用defineStore()中的actions屬性定義
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
},
actions:{
increment(){
this.counter++
},
//傳參
incrementnum(num){
this。counter += num
}
}
})
和getters一樣，在action中可以通過this訪問整個store實例：
function increment(){
//調用
counterStore.increment()
}
function incrementnum(){
counterStore.increment(10)
}
Actions執(zhí)行異步操作：
Actions中是支持異步操作的，并且我們可以編寫異步函數(shù)，在函數(shù)中使用await
actions:{
async fetchHome(){
//???請求
const res = await fetch('?????')
const data = await res.json()
console.log('data',data)
return data
}
}
cosnt counterStore = useCounter
counterStore.fetchHome().then(res => {
console.log(res)
})
總結
到此這篇關于Vue3中Pinia基本使用的文章就介紹到這了,更多相關Vue3 Pinia使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器
這篇文章主要介紹了使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vant-ui AddressEdit地址編輯和van-area的用法說明
這篇文章主要介紹了vant-ui AddressEdit地址編輯和van-area的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue中路由跳轉不計入history的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家介紹了vue自定義loader將行內樣式px轉rem適配示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue項目如何設置全局字體樣式font-family問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
django簡單的前后端分離的數(shù)據(jù)傳輸實例 axios
這篇文章主要介紹了django簡單的前后端分離的數(shù)據(jù)傳輸實例 axios，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-05-05
本篇文章主要介紹了vue 組件之間使用eventbus傳值。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單
這篇文章主要為大家詳細介紹了vue+quasar使用遞歸實現(xiàn)動態(tài)多級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
element中table操作按鈕展示與折疊的實現(xiàn)示例
因為隨著功能的增多，table操作欄中的功能按鈕增多，這時候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2022-04-04