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>