1、首先安装pinia

yarn add pinia
# 或使用npm
npm install pinia

2、在项目的src目录下新建store文件夹，然后store目录下新建index.js / index.ts ：

我这里是index,js

import { createPinia } from "pinia"// 创建 Pinia 实例
const pinia  = createPinia()// 导出 Pinia 实例以便将其与应用程序实例关联
export default pinia

3、 接着在项目入口文件main.js 或 main.ts 引入并使用：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'
import store from './store/index'createApp(App).use(router).use(store).mount('#app')

4、然后使用defineStore来定义状态存储模块，一般使用useXXXXXStore 来约定俗成的命名规范， 我这里是user.js：

import { defineStore } from "pinia"export const useUserStore = defineStore({//id 是为了更好地区分模块id: 'user',state: () => ({name: 'Tony',age: 18,count: 0}),getters: {doubleCount: (state) => state.count * 2,},actions: {// 定义操作或异步请求increment() {// 这里访问state的数据不再是state.XXX，而是通过thisthis.count++}}
})

 5、在组件内使用store：

<template><div><h3>我是测试pinia状态存储的组件，我有一个子组件</h3><div>userStore里的state数据：</div><span>姓名： {{ name }}</span>&nbsp;&nbsp; <span>年龄： {{ age }}</span><div><button @click="handleIncre">修改count:</button>count: {{ count }}</div><!-- 直接调用getters的方法 --><div> Double count is: {{ doubleCount }}</div></div>
</template>

js:

<script setup>
import { ref, reactive } from 'vue'
import TestChild1 from './component/TestChild1.vue'
import { useUserStore } from '../../store/user';
import { storeToRefs } from 'pinia'const userStore = useUserStore()
// 通过storeToRefs包裹，解构出来的属性/方法才有响应式
const { name, age, count,  doubleCount} = storeToRefs(userStore)
// console.log('userStore:', userStore.name, userStore.age, userStore.count)
// console.log(name.value, age.value, count.value);// 调用store的actions的increment方法
const handleIncre = () => {userStore.increment()
}</script>

解构store的变量或方法时，如果没有通过storeToRefs包裹，就失去了响应式：

​​​​​​​

具有响应式：

​​​​​​​ 

 以上就是pinia的vue3使用，后面更新持续化存储和actions里发异步请求。