1. 使用vite 開發(fā)vue3項(xiàng)目如何使用 pina

要在使用 Vite 開發(fā)的 Vue 3 項(xiàng)目中使用 Pinia

1.1. 使用步驟：

1.1.1. 使用 npm 或 yarn 來(lái)安裝 Pinia

首先，確保你有一個(gè) Vue 3 的項(xiàng)目環(huán)境準(zhǔn)備好了，并且你正在使用 Vite 作為構(gòu)建工具。

你可以使用 npm 或 yarn 來(lái)安裝 Pinia：

# 使用 npm
npm install pinia

# 或者使用 yarn
yarn add pinia

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

不過(guò)，對(duì)于 Vue 3 的項(xiàng)目，默認(rèn)情況下已經(jīng)支持組合式 API，所以通常不需要額外安裝此包。

1.1.2. 建一個(gè) Pinia 實(shí)例

接下來(lái)，你需要?jiǎng)?chuàng)建一個(gè) Pinia 實(shí)例（根 store）并將它傳遞給你的應(yīng)用程序：

// 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') // 或者是你的應(yīng)用掛載點(diǎn)

1.1.3. 使用 Pinia

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

Store 是用來(lái)保存在整個(gè)應(yīng)用中都能訪問(wèn)到的數(shù)據(jù)的地方，比如用戶的認(rèn)證狀態(tài)或是在多步表單中存儲(chǔ)的數(shù)據(jù)。

創(chuàng)建 Store 的例子如下：

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

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

然后，在你的組件中使用這個(gè) Store：

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

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

這樣，你就可以在 Vue 3 + Vite 的環(huán)境中使用 Pinia 來(lái)管理你的應(yīng)用狀態(tài)了。

2. Pinia 有哪幾部分組成

Pinia 是一個(gè)用于 Vue.js 應(yīng)用的狀態(tài)管理庫(kù)，它旨在提供一種簡(jiǎn)單且類型安全的方式來(lái)管理應(yīng)用狀態(tài)。

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

Store 由三部分組成：

• state（狀態(tài)）、
• getter（獲取器）
• action（動(dòng)作），它們分別對(duì)應(yīng)于組件中的 data、computed 和 methods。

2.1. State（狀態(tài)）:

• state 是存儲(chǔ)數(shù)據(jù)的地方。它是響應(yīng)式的，這意味著當(dāng) state 中的數(shù)據(jù)發(fā)生變化時(shí)，依賴這些數(shù)據(jù)的組件會(huì)自動(dòng)更新。
• 在 Pinia 中，你使用 state 函數(shù)來(lái)定義 store 的初始狀態(tài)。

2.2. Getters（獲取器）:

• getters 類似于計(jì)算屬性（computed properties），它們是用來(lái)從 store 的 state 或其他 getters 中派生出一些狀態(tài)。
• Getters 可以接受其他 getters 作為第二個(gè)參數(shù)，從而允許組合使用。
• 它們也是緩存的，只有當(dāng)依賴的 state 發(fā)生變化時(shí)才會(huì)重新計(jì)算。

2.3. Actions（動(dòng)作）:

• actions 是用來(lái)改變 state 的方法。你可以在這里執(zhí)行異步操作或者復(fù)雜的邏輯，并在完成后更新 state。
• Actions 通常是同步或異步函數(shù)，可以訪問(wèn)到整個(gè) store 實(shí)例，因此可以直接修改 state 或者調(diào)用其他 actions 和 getters。

2.4. Plugins（插件）:

• Pinia 支持插件系統(tǒng)，允許你在 store 創(chuàng)建、action 調(diào)用前后等時(shí)機(jī)執(zhí)行自定義邏輯。
• 插件可以用來(lái)實(shí)現(xiàn)日志記錄、持久化存儲(chǔ)等功能。

2.5. Devtools Support（開發(fā)工具支持）:

• Pinia 自帶對(duì) Vue Devtools 的支持，這使得開發(fā)者可以在瀏覽器中方便地查看和調(diào)試 store 的狀態(tài)。

2.6. 模塊化:

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

下面是一個(gè)簡(jiǎn)單的 Pinia store 示例，展示了上述各個(gè)部分：

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() {
      // 假設(shè)這里有一些異步操作
      const response = await fetch('/api/data')
      const data = await response.json()
      this.count = data.count
    }
  }
})

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

這樣，你就可以在一個(gè) Vue 組件中通過(guò) useCounterStore() 來(lái)使用這個(gè) store 了。