簡單介紹一個用於 Vue.js 的狀態管理庫：Pinia

爱上大树的小猪發表於2024-11-27
Vue.js

Pinia 是一個用於 Vue.js 的狀態管理庫，它提供了一種輕量且直觀的方式來管理應用中的狀態。Pinia 旨在替代 Vuex（Vue.js 的官方狀態管理庫），並且在設計上更加簡潔和易於使用。以下是 Pinia 的介紹和基本使用方法：

Pinia 的特點

  • 簡單易用：API 設計簡潔，學習曲線平緩。
  • 型別安全：與 TypeScript 良好整合，支援靜態型別檢查。
  • 模組化：鼓勵將狀態分割成多個 store，每個 store 都可以獨立管理和維護。
  • 高效：最佳化了效能，減少了不必要的計算和渲染。

安裝 Pinia

你可以透過 npm 或 yarn 來安裝 Pinia：

npm install pinia
# 或者
yarn add pinia

建立 Store

在你的專案中建立一個新的 store 檔案，例如 store/index.js：

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

在 Vue 應用中使用 Pinia

首先，在 main.js 中設定 Pinia：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.mount('#app')

然後，在元件中使用定義好的 store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { useMainStore } from '../store'

const store = useMainStore()
const { count, doubleCount, increment } = store
</script>

這樣就成功地在 Vue 應用中整合了 Pinia，並開始使用它來管理應用的狀態。Pinia 的設計理念使得狀態管理變得更加簡單和直觀，適合各種規模的 Vue 專案。

相關文章