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
- 在 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
}
})
- 在组件中使用 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>
