1. 使用vite 開發vue3項目如何使用 pina

要在使用 Vite 開發的 Vue 3 項目中使用 Pinia

1.1. 使用步驟：

1.1.1. 使用 npm 或 yarn 來安裝 Pinia

首先，確保你有一個 Vue 3 的項目環境準備好了，并且你正在使用 Vite 作為構建工具。

你可以使用 npm 或 yarn 來安裝 Pinia：

# 使用 npm
npm install pinia

# 或者使用 yarn
yarn add pinia

如果你的應用程序使用的是 Vue 版本低于 2.7，那么你還需要安裝組合式 API 包 @vue/composition-api。

不過，對于 Vue 3 的項目，默認情況下已經支持組合式 API，所以通常不需要額外安裝此包。

1.1.2. 建一個 Pinia 實例

接下來，你需要創建一個 Pinia 實例（根 store）并將它傳遞給你的應用程序：

// main.js 或者是你的入口文件
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app') // 或者是你的應用掛載點

1.1.3. 使用 Pinia

一旦 Pinia 被設置好，你就可以開始定義 Store 并在組件中使用它們。

Store 是用來保存在整個應用中都能訪問到的數據的地方，比如用戶的認證狀態或是在多步表單中存儲的數據。

創建 Store 的例子如下：

// stores/index.js
import { defineStore } from 'pinia'

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

然后，在你的組件中使用這個 Store：

// 在某組件中
import { defineComponent } from 'vue'
import { useMainStore } from './stores/index'

export default defineComponent({
  setup() {
    const store = useMainStore()
    
    return {
      store
    }
  }
})

這樣，你就可以在 Vue 3 + Vite 的環境中使用 Pinia 來管理你的應用狀態了。

2. Pinia 有哪幾部分組成

Pinia 是一個用于 Vue.js 應用的狀態管理庫，它旨在提供一種簡單且類型安全的方式來管理應用狀態。

Pinia 的 store 通常由以下幾個核心部分組成：

Store 由三部分組成：

• state（狀態）、
• getter（獲取器）
• action（動作），它們分別對應于組件中的 data、computed 和 methods。

2.1. State（狀態）:

• state 是存儲數據的地方。它是響應式的，這意味著當 state 中的數據發生變化時，依賴這些數據的組件會自動更新。
• 在 Pinia 中，你使用 state 函數來定義 store 的初始狀態。

2.2. Getters（獲取器）:

• getters 類似于計算屬性（computed properties），它們是用來從 store 的 state 或其他 getters 中派生出一些狀態。
• Getters 可以接受其他 getters 作為第二個參數，從而允許組合使用。
• 它們也是緩存的，只有當依賴的 state 發生變化時才會重新計算。

2.3. Actions（動作）:

• actions 是用來改變 state 的方法。你可以在這里執行異步操作或者復雜的邏輯，并在完成后更新 state。
• Actions 通常是同步或異步函數，可以訪問到整個 store 實例，因此可以直接修改 state 或者調用其他 actions 和 getters。

2.4. Plugins（插件）:

• Pinia 支持插件系統，允許你在 store 創建、action 調用前后等時機執行自定義邏輯。
• 插件可以用來實現日志記錄、持久化存儲等功能。

2.5. Devtools Support（開發工具支持）:

• Pinia 自帶對 Vue Devtools 的支持，這使得開發者可以在瀏覽器中方便地查看和調試 store 的狀態。

2.6. 模塊化:

• Pinia 允許將 store 拆分成多個小的模塊，每個模塊都可以獨立定義自己的 state, getters, 和 actions。
• 這種方式有助于組織大型應用的狀態管理，使其更加清晰和易于維護。

下面是一個簡單的 Pinia store 示例，展示了上述各個部分：

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // State
  state: () => ({
    count: 0,
  }),

  // Getters
  getters: {
    doubleCount: (state) => state.count * 2,
  },

  // Actions
  actions: {
    increment() {
      this.count++
    },
    async fetchData() {
      // 假設這里有一些異步操作
      const response = await fetch('/api/data')
      const data = await response.json()
      this.count = data.count
    }
  }
})

在這個例子中，useCounterStore 定義了一個名為 counter 的 store，它包含一個 count 狀態、一個 doubleCount getter 和兩個 actions：increment 和 fetchData。

這樣，你就可以在一個 Vue 組件中通過 useCounterStore() 來使用這個 store 了。