总结：

在store文件夹中建一个pinia的文件userStore.js

1.要想使用pinia必须先引入defineStore  这里我们使用es6的模块化语法导出的

  import { defineStore } from 'pinia'

2.然后使用export const useUserStore = defineStore('user',{})

  defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复

  第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations

3.state(){return{ }}  是一个函数返回一个对象，对象里面就是可以共享的状态

4.getters:{ } 是一个对象,可以定义类型计算数据的函数,直接用来当变量使用相当于vue里面的计算属性，可以缓存数据

5.actions:{ } 是一个对象，可以定义方法修改state里面的数据可以是异步，也可以是同步

在components中建一个User.vue文件

1.引入import { useUserStore } from '../store/userStore'

2.值得注意的是useUserStore是一个 方法，调用之后会给我们返回一个对象,这个时候页面上就能正常显示我们在userStore.js里面的state里面定义的firstName、lastName、gender、age

const user = useUserStore()

userStore.js 

// 要想使用pinia必须先引入defineStore  这里我们使用es6的模块化语法导出的
import { defineStore } from 'pinia'
// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）
// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations
export const useUserStore = defineStore('user', {// 定义共享状态state() {  //是一个函数返回一个对象，对象里面就是可以共享的状态return {firstName: '张',lastName: '三',gender: '女',age:12}},// getters是一个对象,可以定义类型计算数据的函数,直接用来当变量使用// 相当于vue里面的计算属性，可以缓存数据getters: {fullName() {return this.firstName+this.lastName+this.age}},// actions 是一个对象，可以定义方法修改state里面的数据// 可以是异步，也可以是同步actions: {changeFirstName(payload) {this.firstName = payload},changeLastName(payload) {this.lastName = payload},changeAge(payload) {setTimeout(() => {this.age = payload},3000)} }
})

 User.vue

<template><h1>修改用户信息</h1><input type="text" v-model="firstName"><button @click="updatefirst">修改firstName</button><input type="text" v-model="lastName"><button @click="updateLast">修改lastName</button><input type="text" v-model="age"><button @click="updateAge">修改age</button>{{ user.fullName}}<hr>{{ user.firstName }}{{ user.lastName }}{{ user.gender }}{{ user.age }}
</template><script setup>
import { ref, reactive } from 'vue';
import { useUserStore } from '../store/userStore'// 值得注意的是useUserStore是一个 方法，调用之后会给我们返回一个对象
// 这个时候页面上就能正常显示我们在userStore.js里面的state里面定义的firstName、lastName、gender、age
const user = useUserStore()const firstName = ref('')
const lastName = ref('')
const age = ref('')// 定义一个方法
const updatefirst=() => {user.changeFirstName(firstName.value)
}
const updateLast = () => {user.changeLastName(lastName.value)
}
const updateAge = () => {user.changeAge(age.value)
}
</script><style scoped></style>