Pinia 是 Vue.js 的一款狀態管理庫，它是 Vuex 的替代方案（雖然 Vuex 依然可用，但 Pinia 在很多方面展現出了優勢），旨在為 Vue 開發者提供一種簡潔、直觀且功能強大的狀態管理方式。

以下是一個在 Vue 3 項目中使用 Pinia 進行狀態管理的基本實例，展示了其常見的使用步驟和方式：

1、安裝vue3環境

使用 npm安裝:
npm init vite@latest

使用 Yarn:
yarn create vite

使用 pnpm:
pnpm create vite

然后按照實際需求一步一步操作，如下圖示例：

pinia安裝過程

2、安裝 Pinia
通過命令行安裝 Pinia：

npm install pinia
# 或者使用 yarn
yarn add pinia

3. 在 Vue 項目中掛載 Pinia 實例
   main.ts(如果是使用 TypeScript 的項目）文件中掛載 Pinia，示例代碼如下：

// main.js
import { createApp } from 'vue'
//引入pinia
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
//創建實體
const pinia = createPinia()
//應用實體
app.use(pinia)
app.mount('#app')

4、定義 Store
創建一個store目錄（可根據實際項目結構自行調整），在該目錄下新建counters.ts文件來定義一個簡單的計數器相關的store，說到這里有兩種定義的方法：
（1）使用選項 API定義，主要是指實例應用的環節：

// counter.js
import { defineStore } from 'pinia'

// 第一個參數是應用程序中 store 的唯一 id
export const useCountStore = defineStore('counter', {
  // state 是用于存儲狀態數據的函數，返回一個對象，類似與組件中data,定義變量
  state: () => ({
    count: 0
  }),

  // getters 類似于計算屬性，用于改變 state 數據
  getters: {
    doubleCount: (state) => state.count * 2
  },

  // actions 用來定義改變 state 的方法，可以是異步操作等，相當于組件中methods
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

（2）用setup方式定義

import { defineStore } from "pinia";
import { ref, computed } from 'vue'

export const useCountStore = defineStore('count',() => {
    //定義變量
    
    const count = ref(0)

    //定義修改數據的方法
    const doubleCount = computed(()=>count.value*2)
    const increment = () => {
        count.value ++;
     }

    const  decrement = () => {
        count.value --;
    }

    //以對象的形式return
    return {
        count,
        doubleCount,
        increment,
        decrement
    }
})

5. 在組件中使用 Store
   以下是在一個 Vue 組件（例如CounterView.vue）中使用上述定義的counte store的示例：

<template>
    <div>當前計數：{{count}}</div>
    <div>當前雙倍計數：{{useCount.doubleCount}}</div>
    <button @click="useCount.increment()">加一</button>
    <button @click="useCount.decrement()">減一</button>
</template>

<script setup lang="ts">

//1、首先引入useCountStore 文件
import { useCountStore } from './store';
import { storeToRefs } from 'pinia'   

//2、
const useCount = useCountStore();

//用storeToRefs來包裹變量，實現響應式數據。
const { count } = storeToRefs(useCount)
</script>
<style scoped>
</style>