Vue3中Pinia的基本使用筆記
什么是Pinia呢？
Pina開(kāi)始于大概2019，是一個(gè)狀態(tài)管理的庫(kù)，用于跨組件、頁(yè)面進(jìn)行狀態(tài)共享（這和Vuex、Redux一樣）,用起來(lái)像組合式API（Composition API）
Pinia和Vuex的區(qū)別
- PInia的最初是為了探索Vuex的下一次迭代會(huì)是什么樣子，結(jié)合了Vuex核心團(tuán)隊(duì)討論中的許多想法；
- 最終，團(tuán)隊(duì)意識(shí)到Pinia已經(jīng)實(shí)現(xiàn)了Vuex5中大部分內(nèi)容，所以最終決定用Pinia來(lái)替代Vuex；
- 與Vuex相比，Pinia提供了一個(gè)更簡(jiǎn)單的API，具有更少的儀式，提供了Composition-API風(fēng)格的API
- 更重要的是，與TypeScript一起使用時(shí)具有可靠的類型推斷支持
與Vuex相比，Pinia很多的優(yōu)勢(shì)：
比如mutations不再存在：
- mutations最初是為devtools集成，但這不在是問(wèn)題
- 他們經(jīng)常認(rèn)為是非常冗長(zhǎng)
更友好的TpeScipt支持，Vuex之前對(duì)Ts的支持很不友好
不在有modules的嵌套結(jié)構(gòu)
- 你可以靈活使用每一個(gè)store，他們是通過(guò)扁平化的方式來(lái)相互使用的;
不在有命名空間的概念，不在需要記住他們的復(fù)雜關(guān)系
如何使用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導(dǎo)入并引用
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ū)分不同文件
//定義關(guān)于counter的store
import { defineStore } from ‘pinia'
//defineStore 是返回一個(gè)函數(shù) 函數(shù)命名最好有use前綴，根據(jù)函數(shù)來(lái)進(jìn)行下一步操作
const useCounter = defineStore('counter',{
state: () => {
count:99
}
})
export default useCounter
5、調(diào)用pinia，獲取pinia狀態(tài)值，導(dǎo)入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解構(gòu)出來(lái)的state也是可以調(diào)用，但會(huì)失去響應(yīng)式，需要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
（相當(dāng)于：data、computed、methods）
認(rèn)識(shí)和定義State
state是store的核心部分，因?yàn)閟tore是用來(lái)幫助我們管理狀態(tài)
操作State
1.讀取和寫(xiě)入state：
默認(rèn)情況下，可以通過(guò)store實(shí)例訪問(wèn)狀態(tài)來(lái)直接讀取和寫(xiě)入狀態(tài)；
``` const counterStore = useCounter() counterStore.counter++ counterStore.name = 'coderWhy' ```
2.重置State：
可以調(diào)用store上的$reset()方法將狀態(tài)重置到其初始值
const counterStore = useCounter() conterStore.$reset()
3.改變State
- 除了直接用store.counter++修改store，還可以調(diào)用$patch
- 它允許您使用部分‘state’對(duì)象同時(shí)應(yīng)該多個(gè)修改
const counterStore = useCounter()
counterStore.$patch({
counter:100,
name:'kobe'
})
4.替換State
可以通過(guò)將其$state屬性設(shè)置為新對(duì)象替換Store的整個(gè)狀態(tài)
conterStore.$state = {
counter:1,
name:'why'
}
認(rèn)識(shí)和定義Getters
Getters相當(dāng)于Store的計(jì)算屬性：
- 它們可用defineStore()中的getters屬性定義
- getters中可以定義接受一個(gè)state作為參數(shù)的函數(shù)
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
doubleCounter(state){
return state.counter *2
}
}
})
訪問(wèn)Store里getters方法
1.訪問(wèn)當(dāng)前store的getters：
const counterSotre = useCounter() console.log(counterStore.doublCounter)
2.我們可以使用this來(lái)訪問(wèn)當(dāng)前的store實(shí)例中g(shù)etters
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.訪問(wèn)其它store的getters
import useUser from ./user
const userStore = useUser()
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調(diào)用其它Store
doubleCounterUser(){
return this.doubleCounter + userStore.umu
}
}
})
4.通過(guò)getters可以返回一個(gè)函數(shù)，可以傳參數(shù)
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調(diào)用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
}
})
const StoreConter = useCounter(); //傳參 StoreCounter.doublCounter(111)
認(rèn)識(shí)和定義Actions
Actions 相當(dāng)于組件中的methods，可以使用defineStore()中的actions屬性定義
expoer const useCounter = defineStore('counter',{
state: () => {
counter:100,
firstname:'kobe'
},
getters:{
//調(diào)用其它Store
doubleCounter(state){
return function (is) {
return state.id + id
}
}
},
actions:{
increment(){
this.counter++
},
//傳參
incrementnum(num){
this。counter += num
}
}
})
和getters一樣，在action中可以通過(guò)this訪問(wèn)整個(gè)store實(shí)例：
function increment(){
//調(diào)用
counterStore.increment()
}
function incrementnum(){
counterStore.increment(10)
}
Actions執(zhí)行異步操作：
Actions中是支持異步操作的，并且我們可以編寫(xiě)異步函數(shù)，在函數(shù)中使用await
actions:{
async fetchHome(){
//???請(qǐng)求
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)
})
總結(jié)
到此這篇關(guān)于Vue3中Pinia基本使用的文章就介紹到這了,更多相關(guān)Vue3 Pinia使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VueX模塊的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue簡(jiǎn)單封裝axios之解決post請(qǐng)求后端接收不到參數(shù)問(wèn)題
這篇文章主要介紹了Vue簡(jiǎn)單封裝axios之解決post請(qǐng)求后端接收不到參數(shù)問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue使用axios上傳文件(FormData)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了在vue中使用G2圖表的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值
這篇文章主要介紹了vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
這篇文章主要介紹了為什么推薦使用JSX開(kāi)發(fā)Vue3，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue3?TS?vite?element?ali-oss使用教程示例
這篇文章主要為大家介紹了vue3?TS?vite?element?ali-oss使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
如何通過(guò)shell腳本自動(dòng)生成vue文件詳解
這篇文章主要給大家介紹了關(guān)于如何通過(guò)shell腳本自動(dòng)生成vue文件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03