可愛簡約又輕量的Pinia，你確定不用它嗎？
1 寫在前面
Pinia.js是由Vue.js團隊核心成員開發(fā)的新一代狀態(tài)管理器，使用Composition Api進行重新設計的，也被視為下一代Vuex。Pinia是一個Vue的狀態(tài)管理庫，允許跨組件、跨頁面進行全局共享狀態(tài)，也由于其設計的簡潔性、和對typescript的良好支持，取代Vuex指日可待。
或許，你在想在vue3中Composition API完全可以使用響應式變量進行全局共享狀態(tài)，為什么還需要Pinia呢?其實你忽略的一點，你這樣做在單頁面進行應用是完全可以的，但是如果頁面時服務端進行渲染呈現(xiàn)的，那么就會出現(xiàn)安全漏洞。
Pinia的優(yōu)點有：
- 完全支持Typescript，不需要進行復雜的配置
- 移除了“天下苦秦久矣”的mutations，不需要再區(qū)分同步異步去使用不同的方法，actions同時支持同步和異步，這樣形成了state、getters、actions三劍客格局
- 支持服務端渲染
- 不再需要套娃??了，沒有模塊嵌套，只有簡簡單單可以自由使用的store概念，形成了更好的代碼分割體驗
- 相比于Vuex更加輕量的設計，壓縮代碼打包的體積
總而言之，Pinia不僅可愛，還簡單輕量易上手。
2 開始使用
安裝Pinia
$ yarn add pinia
$ npm i pinia
$ pnpm i pinia
創(chuàng)建Store
根據(jù)Pinia官方給的格式建議，我們可以在src目錄下創(chuàng)建store目錄，再在其下創(chuàng)建index.ts文件作為store的全局配置文件，并導出store，方便全局掛載。
//src/store/index.ts
import {App} from "vue"
import {createPinia} from "pinia"
const store = createPinia()
export function setupStore(app:App<Element>){
app.use(store)
}
export {store}
在main.ts文件中進行全局掛載store文件：
//src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import {setupStore} from "@stores/index"
const app = createApp(App);
// 掛載store
setupStore(app)
app.mount("#app")
簡單示例
先定義一個counter的store狀態(tài)管理文件。
//src/store/modules/counter.ts
import {defineStore} from "pinia"
export const useCounterStore = defineStore("counter",{
state:()=>{
return {
count:0
}
},
actions:{
increment(){
this.count++
}
}
})
而后在vue文件進行使用：
<template>
<div>count:{{counter.count}}</div>
</template>
<script lang="ts" setup>
import { useCounterStore } from '@store/modules/counter';
const counter = useCounterStore();
counter.count++
counter.$patch({count:counter.count})
counter.increment()
</script>
顯示結果
3State 數(shù)據(jù)狀態(tài)
定義state狀態(tài)
在使用倉庫狀態(tài)數(shù)據(jù)前，你需要先使用defineStore()進行定義一個倉庫，需要使用唯一的名字進行命名。
//src/store/modules/counter.ts
import {defineStore} from "pinia"
export const useCounterStore = defineStore("counter",{
state:()=>{
return {
count:0
}
}
})
使用state狀態(tài)
在pinia中，state是使用函數(shù)進行定義，并返回初始化數(shù)據(jù)，這樣可以允許pinia作為服務端和客戶端進行使用。
我們已經(jīng)定義了一個store倉庫，使用useStore()進行獲取倉庫state數(shù)據(jù)。
<template>
<div>count:{{count}}</div>
<div>doubleCount:{{doubleCount}}</div>
</template>
<script lang="ts" setup>
import { useCounterStore } from '@store/modules/counter';
const counter = useCounterStore();
//使用computed獲取響應式數(shù)據(jù)
const doubleCount = computed(()=>counter.count*2);
const {count} = counter;
</script>
需要注意的是，在導入store使用state狀態(tài)時，直接進行解構會使得變量失去響應式。上面的數(shù)據(jù)中，count變量是失去了響應式的，它的值一直恒定不變。對此，應該像composition API使用props一樣，從pinia中導出storeToRefs進行獲取響應式數(shù)據(jù)。
const counter = useCounterStore();
const {count} = storeToRefs(counter)
對此，count現(xiàn)在轉為響應式的數(shù)據(jù)了，這樣將會把store中的state變量成了響應式，storeToRefs將會自動跳過所有的actions和不需要進行響應式處理的屬性。
修改state狀態(tài)
通常，你可以通過store實例進行直接獲取和修改state數(shù)據(jù)，可以使用store.$reset()進行重置state的數(shù)據(jù)回復到初始值。
import { useCounterStore } from '@stores/modules/counter';
const counter = useCounterStore();
counter.count++;當然，你還可以通過使用pinia的內置API即$patch()進行更新，它允許你在同一時間進行多個數(shù)據(jù)的改變。$patch()允許你去組合多個改變的值，可以像數(shù)組進行增刪改查。
import { useTodosStore } from "@stores/modules/todos";
const todosStore = useTodosStore()
todosStore.$patch(state=>{
state.todos.push({
name:"yichuan",
age:18
})
state.isTrue = true
})$patch()允許你去組合多個改變的值，可以像數(shù)組進行增刪改查。
替換state的值，可以通過設置$state的值進行替換store中的state值。
store.$state = {counter:666, name:"onechuan"}當然也可以通過pinia的實例去改變整個state的值。
pinia.state.value= {}但是，一般不建議直接修改state的值，Pinia中建議使用actions方法去修改和管理state的值。
監(jiān)聽state狀態(tài)變化
訂閱state的值：你可以通過store的$subscribe()方法去觀察state的改變，類似于subscribe方法。與常規(guī)watch()相比，使用$subscribe()的優(yōu)勢在于，在補丁發(fā)布后，訂閱只會觸發(fā)一次。
numerStore.$subscribe((mutation,state)=>{
mutation.counter
mutation.name
mutation.isAdmin
localStorage.setItem("numer",JSON.stringify(state))
})默認情況下，狀態(tài)訂閱被綁定到添加它們的組件上(如果存儲在組件的setup()中)。這就以為著當組件被卸載的時候，將自動移除。如果你想再組件被移除后繼續(xù)保持它們，可以通過設置{detached:true}作為第二個參數(shù)來從當前組件中分離狀態(tài)訂閱。
const someStore = useSomeStore()
someStore.$subscribe(callback, { detached: true })
4Getters
getters與store狀態(tài)的computed的值完全相同，可以通過defineStore()中的getters屬性來定義，它們通過接收state作為箭頭函數(shù)的第一個參數(shù)。
export const useStore = defineStore('counter', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})絕大多數(shù)情況，getters將只依賴于state，然而，它們也有可能需要去使用其它的getters。因此，在定義一個普通函數(shù)時，我們可以通過這個函數(shù)訪問整個store實例，但需要定義返回類型的類型。由于ts中的已知的限制，并不影響使用箭頭函數(shù)定義的getter和不使用this。
import {defineStore} from "pinia"
export const useNumerStore = defineStore("numer",{
state:()=>({
counter:0,
name:"numer",
isAdmin:true
}),
getters:{
doubleCount(state){
return state.counter * 2
},
// 當使用this的時候，必須準確地設置返回值的類型
doublePlusOne():number{
return this.counter * 2 + 1
}
}
})當然你也可以通過計算屬性去獲取多個getters，需要通過this去獲取任意的其他getter。
export const useStore = defineStore("main",{
state:()=>({
counter:0
}),
getters:{
doubleCount:state=>state.counter * 2,
doubleCountPlusOne(){
return this.doubleCount + 1
}
}
})getter只是在幕后的計算屬性，因此不能向其傳遞任何參數(shù)。但是你可以從getter返回一個函數(shù)來接收任何參數(shù)。
export const useStore = defineStore('main', {
getters: {
getUserById: (state) => {
return (userId) => state.users.find((user) => user.id === userId)
},
},
})在組件使用：
<div>用戶：{{getUserById(1)}}</div>
const numerStore = useNumerStore()
const {getUserById} = numerStore注意，當這樣做時，getter不再被緩存，它們只是您調用的函數(shù)。不過，您可以在getter本身中緩存一些結果，這并不常見，但應該會證明更高效.
export const useStore = defineStore('main', {
getters: {
getActiveUserById(state) {
const activeUsers = state.users.filter((user) => user.active)
return (userId) => activeUsers.find((user) => user.id === userId)
},
},
})獲取其它store的getters，要使用另一個store getter，你可以直接在getter中使用它，其實和在vue文件中使用差別不大。
import { useOtherStore } from './other-store'
export const useStore = defineStore('main', {
state: () => ({
// ...
}),
getters: {
otherGetter(state) {
const otherStore = useOtherStore()
return state.localData + otherStore.data
},
},
})5Actions
actions等價于組件中的方法，它們可以在defineStore()中進行定義actions屬性，并且可以完美地去定義業(yè)務邏輯。
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++
},
randomizeCounter() {
this.counter = Math.round(100 * Math.random())
},
},
})在上面的代碼中，我們可以看到actions有點類似getters，但事實上是有所不同的。
- 相同點：actions和getters都可以全類型支持來訪問整個store實例。
- 不同點：actions操作可以是異步的，可以在其中等待任何api調用甚至其他操作。
注意，只要你得到了一個Promise，你使用的庫并不重要，你甚至可以使用本地的fetch函數(shù)(僅適用于瀏覽器):
import { mande } from 'mande'
const api = mande('/api/users')
export const useUsers = defineStore('users', {
state: () => ({
userData: null,
// ...
}),
actions: {
async registerUser(login, password) {
try {
this.userData = await api.post({ login, password })
showTooltip(`Welcome back ${this.userData.name}!`)
} catch (error) {
showTooltip(error)
// let the form component display the error
return error
}
},
},
})同樣的，action也可以像state和getters進行相互使用，action可以通過this直接訪問。
// src/store/user.ts
export const useUserStore = defineStore({
"user",
state: () => ({
userData: null
}),
actions:{
async login(account, pwd) {
const { data } = await api.login(account, pwd)
this.setData(data) // 調用另一個 action 的方法
return data
},
setData(data) {
this.userData = data
}
}
})
也可以在action 里調用其他 store 里的 action，引入對應的 store 后即可訪問其內部的方法了。
// src/store/user.ts
import { useAppStore } from './app'
export const useUserStore = defineStore({
id: 'user',
actions: {
async login(account, pwd) {
const { data } = await api.login(account, pwd)
const appStore = useAppStore()
appStore.setData(data) // 調用 app store 里的 action 方法
return data
}
}
})
// src/store/app.ts
export const useAppStore = defineStore({
"app",
state:()=>{
userData: null
},
actions: {
setData(data) {
this.userData = data
}
}
})
6 參考文章
《Pinia官方文檔》
《新一代狀態(tài)管理工具，Pinia.js 上手指南》
7 寫在最后
本篇文章是在閱讀文檔和相關文章進行學習總結得來，是在公司進行應用生產(chǎn)前的實驗，對于能力強的大佬應該是小意思，從vuex過渡可以直接上手。Pinia是很好的狀態(tài)管理，簡潔輕量易上手。在進行總結文章的時候，也做了一些代碼實踐，但是不免會出現(xiàn)一些紕漏。
