關(guān)于Pinia狀態(tài)管理解讀
更新時(shí)間：2023年07月25日 09:40:30 作者：悠然予夏
這篇文章主要介紹了Pinia狀態(tài)管理解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
1、Pinia和Vuex的對(duì)比
1.1、什么是Pinia呢？
Pinia（發(fā)音為/pi?nj?/，如英語(yǔ)中的“peenya”）是最接近piña（西班牙語(yǔ)中的菠蘿）的詞；
- Pinia開始于大概2019年，最初是作為一個(gè)實(shí)驗(yàn)為Vue重新設(shè)計(jì)狀態(tài)管理，讓它用起來(lái)像組合式API（Composition API）。
- 從那時(shí)到現(xiàn)在，最初的設(shè)計(jì)原則依然是相同的，并且目前同時(shí)兼容Vue2、Vue3，也并不要求你使用Composition API；
- Pinia本質(zhì)上依然是一個(gè)狀態(tài)管理的庫(kù)，用于跨組件、頁(yè)面進(jìn)行狀態(tài)共享（這點(diǎn)和Vuex、Redux一樣）；
1.2、Pinia和Vuex的區(qū)別
那么我們不是已經(jīng)有Vuex了嗎？為什么還要用Pinia呢？
- Pinia 最初是為了探索 Vuex 的下一次迭代會(huì)是什么樣子，結(jié)合了 Vuex 5 核心團(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 不再存在：
- 他們經(jīng)常被認(rèn)為是非常冗長(zhǎng)；
- 他們最初帶來(lái)了 devtools 集成，但這不再是問(wèn)題；
更友好的TypeScript支持，Vuex之前對(duì)TS的支持很不友好；
不再有modules的嵌套結(jié)構(gòu)：
- 你可以靈活使用每一個(gè)store，它們是通過(guò)扁平化的方式來(lái)相互使用的；
也不再有命名空間的概念，不需要記住它們的復(fù)雜關(guān)系；
1.3、如何使用Pinia？
使用Pinia之前，我們需要先對(duì)其進(jìn)行安裝：
yarn add pinia # 或者使用 npm npm install pinia
創(chuàng)建一個(gè)pinia并且將其傳遞給應(yīng)用程序：
2、創(chuàng)建Pinia的Store
2.1、認(rèn)識(shí)Store
什么是Store？
- 一個(gè) Store （如 Pinia）是一個(gè)實(shí)體，它會(huì)持有為綁定到你組件樹的狀態(tài)和業(yè)務(wù)邏輯，也就是保存了全局的狀態(tài)；
- 它有點(diǎn)像始終存在，并且每個(gè)人都可以讀取和寫入的組件；
- 你可以在你的應(yīng)用程序中定義任意數(shù)量的Store來(lái)管理你的狀態(tài)；
Store有三個(gè)核心概念：
- state、getters、actions；
- 等同于組件的data、computed、methods；
- 一旦 store 被實(shí)例化，你就可以直接在 store 上訪問(wèn) state、getters 和 actions 中定義的任何屬性；
2.2、定義一個(gè)Store
定義一個(gè)Store：
我們需要知道 Store 是使用 defineStore() 定義的，
并且它需要一個(gè)唯一名稱，作為第一個(gè)參數(shù)傳遞；
這個(gè) name，也稱為 id，是必要的，Pinia 使用它來(lái)將 store 連接到 devtools。
返回的函數(shù)統(tǒng)一使用useX作為命名方案，這是約定的規(guī)范；
2.3、使用定義的Store
Store在它被使用之前是不會(huì)創(chuàng)建的，我們可以通過(guò)調(diào)用use函數(shù)來(lái)使用Store：
注意：Store獲取到后不能被解構(gòu)，那么會(huì)失去響應(yīng)式：
為了從 Store 中提取屬性同時(shí)保持其響應(yīng)式，您需要使用storeToRefs()。
2.4、示例代碼
index.js
import {createPinia} from 'pinia'
// 創(chuàng)建pinia
const pinia = createPinia()
export default piniacounter.js
// 定義關(guān)于counter的store
import {defineStore} from 'pinia'
// 參數(shù)一為標(biāo)識(shí)名
// 返回值為一個(gè)函數(shù)
const useCounter = defineStore("counter", {
state: () => ({
count: 99
})
})
export default useCounterHome.vue
<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';
// 調(diào)用函數(shù)，拿到store對(duì)象
const counterStore = useCounter()
// 解構(gòu)對(duì)象（解構(gòu)出來(lái)的對(duì)象會(huì)失去響應(yīng)式）
// const { count } = toRefs(counterStore)
// storeToRefs這是vue提供的，作用與toRefs相同
const {count} = storeToRefs(counterStore)
// 修改數(shù)據(jù)
function incrementCount() {
counterStore.count++
}
</script>
<style scoped>
</style>
App.vue
<template>
<div class="app">
<h2>App Component</h2>
<hr>
<home/>
</div>
</template>
<script setup>
import Home from './views/Home.vue'
</script>
<style>
</style>main.js
import {createApp} from 'vue'
import App from './App.vue'
import pinia from './stores/index.js'
createApp(App).use(pinia).mount('#app')注意：index.js、App.vue、main.js接下來(lái)都不會(huì)發(fā)生改變了，所以下面的示例代碼就不會(huì)寫出來(lái)了。
3、Pinia核心概念State
3.1、認(rèn)識(shí)和定義State
state 是 store 的核心部分，因?yàn)閟tore是用來(lái)幫助我們管理狀態(tài)的。
在 Pinia 中，狀態(tài)被定義為返回初始狀態(tài)的函數(shù)；
3.2、操作State（一）
讀取和寫入 state：
默認(rèn)情況下，您可以通過(guò) store 實(shí)例訪問(wèn)狀態(tài)來(lái)直接讀取和寫入狀態(tài)；
重置 State：
你可以通過(guò)調(diào)用 store 上的 $reset() 方法將狀態(tài) 重置 到其初始值；
3.3、操作State（二）
改變State：
除了直接用 store.counter++ 修改 store，你還可以調(diào)用 $patch 方法；
它允許您使用部分“state”對(duì)象同時(shí)應(yīng)用多個(gè)更改；
替換State：
您可以通過(guò)將其 $state 屬性設(shè)置為新對(duì)象來(lái)替換 Store 的整個(gè)狀態(tài)：
3.4、代碼示例
Home.vue
<template>
<div class="home">
<h2>Home View</h2>
<h2>name: {{ name }}</h2>
<h2>age: {{ age }}</h2>
<h2>level: {{ level }}</h2>
<button @click="changeState">修改state</button>
<button @click="resetState">重置state</button>
</div>
</template>
<script setup>
import useUser from '@/stores/user'
import {storeToRefs} from 'pinia';
const userStore = useUser()
const {name, age, level} = storeToRefs(userStore)
function changeState() {
// 1.一個(gè)個(gè)修改狀態(tài)
// userStore.name = "kobe"
// userStore.age = 20
// userStore.level = 200
// 2.一次性修改多個(gè)狀態(tài)
// userStore.$patch({
// name: "james",
// age: 35
// })
// 3.替換state為新的對(duì)象
const oldState = userStore.$state
userStore.$state = {
name: "curry",
level: 200
}
console.log(oldState === userStore.$state)
}
function resetState() {
userStore.$reset() // 重置state
}
</script>
<style scoped>
</style>
user.js
import {defineStore} from 'pinia'
const useUser = defineStore("user", {
state: () => ({
name: "why",
age: 18,
level: 100
})
})
export default useUser4、Pinia核心概念Getters
4.1、認(rèn)識(shí)和定義Getters
Getters相當(dāng)于Store的計(jì)算屬性：
它們可以用 defineStore() 中的 getters 屬性定義；
getters中可以定義接受一個(gè)state作為參數(shù)的函數(shù)；
4.2、訪問(wèn)Getters（一）
訪問(wèn)當(dāng)前store的Getters：
Getters中訪問(wèn)自己的其他Getters：
我們可以通過(guò)this來(lái)訪問(wèn)到當(dāng)前store實(shí)例的所有其他屬性;
訪問(wèn)其他store的Getters：
4.3、訪問(wèn)Getters（二）
Getters也可以返回一個(gè)函數(shù)，這樣就可以接受參數(shù)：
4.4、代碼示例
counter.js
// 定義關(guān)于counter的store
import {defineStore} from 'pinia'
import useUser from './user.js'
const useCounter = defineStore("counter", {
state: () => ({
count: 99,
friends: [
{id: 111, name: "why"},
{id: 112, name: "kobe"},
{id: 113, name: "james"},
]
}),
getters: {
// 1.基本使用
doubleCount(state) {
return state.count * 2
},
// 2.一個(gè)getter引入另外一個(gè)getter
doubleCountAddOne() {
// this是store實(shí)例
return this.doubleCount + 1
},
// 3.getters也支持返回一個(gè)函數(shù)
getFriendById(state) {
return function (id) {
for (let i = 0; i < state.friends.length; i++) {
const friend = state.friends[i]
if (friend.id === id) {
return friend
}
}
}
},
// 4.getters中用到別的store中的數(shù)據(jù)
showMessage(state) {
// 1.獲取user信息
const userStore = useUser()
// 2.獲取自己的信息
// 3.拼接信息
return `name:${userStore.name}-count:${state.count}`
}
}
})
export default useCounterHome.vue
<template>
<div class="home">
<h2>Home View</h2>
<h2>doubleCount: {{ counterStore.doubleCount }}</h2>
<h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2>
<h2>friend-111: {{ counterStore.getFriendById(111) }}</h2>
<h2>friend-112: {{ counterStore.getFriendById(112) }}</h2>
<h2>showMessage: {{ counterStore.showMessage }}</h2>
<button @click="changeState">修改state</button>
<button @click="resetState">重置state</button>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
const counterStore = useCounter()
</script>
<style scoped>
</style>
5、Pinia核心概念A(yù)ctions
5.1、認(rèn)識(shí)和定義Actions
Actions 相當(dāng)于組件中的 methods。
可以使用 defineStore() 中的 actions 屬性定義，并且它們非常適合定義業(yè)務(wù)邏輯；
和getters一樣，在action中可以通過(guò)this訪問(wèn)整個(gè)store實(shí)例的所有操作；
5.2、Actions執(zhí)行異步操作
并且Actions中是支持異步操作的，并且我們可以編寫異步函數(shù)，在函數(shù)中使用await；
5.3、代碼示例
counter.js
// 定義關(guān)于counter的store
import {defineStore} from 'pinia'
import useUser from './user'
const useCounter = defineStore("counter", {
state: () => ({
count: 99,
friends: [
{id: 111, name: "why"},
{id: 112, name: "kobe"},
{id: 113, name: "james"},
]
}),
getters: {
// 1.基本使用
doubleCount(state) {
return state.count * 2
},
// 2.一個(gè)getter引入另外一個(gè)getter
doubleCountAddOne() {
// this是store實(shí)例
return this.doubleCount + 1
},
// 3.getters也支持返回一個(gè)函數(shù)
getFriendById(state) {
return function (id) {
for (let i = 0; i < state.friends.length; i++) {
const friend = state.friends[i]
if (friend.id === id) {
return friend
}
}
}
},
// 4.getters中用到別的store中的數(shù)據(jù)
showMessage(state) {
// 1.獲取user信息
const userStore = useUser()
// 2.獲取自己的信息
// 3.拼接信息
return `name:${userStore.name}-count:${state.count}`
}
},
actions: {
increment() {
this.count++
},
incrementNum(num) {
this.count += num
}
}
})
export default useCounterhome.js
import {defineStore} from 'pinia'
const useHome = defineStore("home", {
state: () => ({
banners: [],
recommends: []
}),
actions: {
async fetchHomeMultidata() {
// fetchHomeMultidata() {
const res = await fetch("http://123.207.32.32:8000/home/multidata")
const data = await res.json()
this.banners = data.data.banner.list
this.recommends = data.data.recommend.list
// return new Promise(async (resolve, reject) => {
// const res = await fetch("http://123.207.32.32:8000/home/multidata")
// const data = await res.json()
// this.banners = data.data.banner.list
// this.recommends = data.data.recommend.list
// resolve("bbb")
// })
}
}
})
export default useHomeHome.vue
<template>
<div class="home">
<h2>Home View</h2>
<h2>doubleCount: {{ counterStore.count }}</h2>
<button @click="changeState">修改state</button>
<!-- 展示數(shù)據(jù) -->
<h2>輪播的數(shù)據(jù)</h2>
<ul>
<template v-for="item in homeStore.banners">
<li>{{ item.title }}</li>
</template>
</ul>
</div>
</template>
<script setup>
import useCounter from '@/stores/counter';
import useHome from '@/stores/home';
const counterStore = useCounter()
function changeState() {
// counterStore.increment()
counterStore.incrementNum(10)
}
const homeStore = useHome()
homeStore.fetchHomeMultidata().then(res => {
console.log("fetchHomeMultidata的action已經(jīng)完成了:", res)
})
</script>
<style scoped>
</style>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果
這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue @input和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼
這篇文章主要介紹了vue js秒轉(zhuǎn)天數(shù)小時(shí)分鐘秒的實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue-cli3.0如何修改端口號(hào)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue加載中動(dòng)畫組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況
這篇文章主要介紹了解決vue props傳Array/Object類型值,子組件報(bào)錯(cuò)的情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題
下面小編就為大家分享一篇解決vue多個(gè)路由共用一個(gè)頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了Vue異步加載about組件的相關(guān)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要為大家介紹了vue組件通信的幾種方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要介紹了Vue使用Proxy代理后仍無(wú)法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11