可愛簡約又輕量的Pinia，你確定不用它嗎？

作者：一川 2022-01-18 20:27:32

Pinia.js是由Vue.js團隊核心成員開發的新一代狀態管理器，使用Composition Api進行重新設計的，也被視為下一代Vuex。Pinia是一個Vue的狀態管理庫。

1 寫在前面

Pinia.js是由Vue.js團隊核心成員開發的新一代狀態管理器，使用Composition Api進行重新設計的，也被視為下一代Vuex。Pinia是一個Vue的狀態管理庫，允許跨組件、跨頁面進行全局共享狀態，也由于其設計的簡潔性、和對typescript的良好支持，取代Vuex指日可待。

或許，你在想在vue3中Composition API完全可以使用響應式變量進行全局共享狀態，為什么還需要Pinia呢?其實你忽略的一點，你這樣做在單頁面進行應用是完全可以的，但是如果頁面時服務端進行渲染呈現的，那么就會出現安全漏洞。

Pinia的優點有：

完全支持Typescript，不需要進行復雜的配置
移除了“天下苦秦久矣”的mutations，不需要再區分同步異步去使用不同的方法，actions同時支持同步和異步，這樣形成了state、getters、actions三劍客格局
支持服務端渲染
不再需要套娃??了，沒有模塊嵌套，只有簡簡單單可以自由使用的store概念，形成了更好的代碼分割體驗
相比于Vuex更加輕量的設計，壓縮代碼打包的體積

總而言之，Pinia不僅可愛，還簡單輕量易上手。

2 開始使用

安裝Pinia

$ yarn add pinia
$ npm i pinia
$ pnpm i pinia

創建Store

根據Pinia官方給的格式建議，我們可以在src目錄下創建store目錄，再在其下創建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狀態管理文件。

//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 數據狀態

定義state狀態

在使用倉庫狀態數據前，你需要先使用defineStore()進行定義一個倉庫，需要使用唯一的名字進行命名。

//src/store/modules/counter.ts
import {defineStore} from "pinia"

export const useCounterStore = defineStore("counter",{
  state:()=>{
    return {
      count:0
    }
  }
})

使用state狀態

在pinia中，state是使用函數進行定義，并返回初始化數據，這樣可以允許pinia作為服務端和客戶端進行使用。

我們已經定義了一個store倉庫，使用useStore()進行獲取倉庫state數據。

<template>
  <div>count:{{count}}</div>
  <div>doubleCount:{{doubleCount}}</div>
</template>
<script lang="ts" setup>
import { useCounterStore } from '@store/modules/counter';
const counter = useCounterStore();
//使用computed獲取響應式數據
const doubleCount = computed(()=>counter.count*2);

const {count} = counter;
</script>

需要注意的是，在導入store使用state狀態時，直接進行解構會使得變量失去響應式。上面的數據中，count變量是失去了響應式的，它的值一直恒定不變。對此，應該像composition API使用props一樣，從pinia中導出storeToRefs進行獲取響應式數據。

const counter = useCounterStore();
const {count} = storeToRefs(counter)

對此，count現在轉為響應式的數據了，這樣將會把store中的state變量成了響應式，storeToRefs將會自動跳過所有的actions和不需要進行響應式處理的屬性。

修改state狀態

通常，你可以通過store實例進行直接獲取和修改state數據，可以使用store.$reset()進行重置state的數據回復到初始值。

import { useCounterStore } from '@stores/modules/counter';
const counter = useCounterStore();
counter.count++;

當然，你還可以通過使用pinia的內置API即$patch()進行更新，它允許你在同一時間進行多個數據的改變。$patch()允許你去組合多個改變的值，可以像數組進行增刪改查。

import { useTodosStore } from "@stores/modules/todos";
const todosStore = useTodosStore()
todosStore.$patch(state=>{
  state.todos.push({
    name:"yichuan",
    age:18
  })
  state.isTrue = true
})

$patch()允許你去組合多個改變的值，可以像數組進行增刪改查。

替換state的值，可以通過設置$state的值進行替換store中的state值。

store.$state = {counter:666, name:"onechuan"}

當然也可以通過pinia的實例去改變整個state的值。

pinia.state.value= {}

但是，一般不建議直接修改state的值，Pinia中建議使用actions方法去修改和管理state的值。

監聽state狀態變化

訂閱state的值：你可以通過store的$subscribe()方法去觀察state的改變，類似于subscribe方法。與常規watch()相比，使用$subscribe()的優勢在于，在補丁發布后，訂閱只會觸發一次。

numerStore.$subscribe((mutation,state)=>{
  mutation.counter
  mutation.name
  mutation.isAdmin
  localStorage.setItem("numer",JSON.stringify(state))
})

默認情況下，狀態訂閱被綁定到添加它們的組件上(如果存儲在組件的setup()中)。這就以為著當組件被卸載的時候，將自動移除。如果你想再組件被移除后繼續保持它們，可以通過設置{detached:true}作為第二個參數來從當前組件中分離狀態訂閱。

const someStore = useSomeStore()
someStore.$subscribe(callback, { detached: true })

4Getters

getters與store狀態的computed的值完全相同，可以通過defineStore()中的getters屬性來定義，它們通過接收state作為箭頭函數的第一個參數。

export const useStore = defineStore('counter', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

絕大多數情況，getters將只依賴于state，然而，它們也有可能需要去使用其它的getters。因此，在定義一個普通函數時，我們可以通過這個函數訪問整個store實例，但需要定義返回類型的類型。由于ts中的已知的限制，并不影響使用箭頭函數定義的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只是在幕后的計算屬性，因此不能向其傳遞任何參數。但是你可以從getter返回一個函數來接收任何參數。

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不再被緩存，它們只是您調用的函數。不過，您可以在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屬性，并且可以完美地去定義業務邏輯。

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函數(僅適用于瀏覽器):

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官方文檔》

《新一代狀態管理工具，Pinia.js 上手指南》

7 寫在最后

本篇文章是在閱讀文檔和相關文章進行學習總結得來，是在公司進行應用生產前的實驗，對于能力強的大佬應該是小意思，從vuex過渡可以直接上手。Pinia是很好的狀態管理，簡潔輕量易上手。在進行總結文章的時候，也做了一些代碼實踐，但是不免會出現一些紕漏。

責任編輯：姜華來源：前端萬有引力