说明
- 很多管理系统，一般右上角的
用户信息组件显示当前用户昵称，当点击 【修改昵称】 时，显示修改昵称组件 - 修改昵称后，
用户信息组件也会同时改变
这就涉及到 2个组件共享昵称数据，应该使用Pinia进行状态（用户昵称）管理，如下图：
在 Rename组件中修改昵称，User组件中的昵称会跟着改变
代码执行流程
创建 User 组件
在 src/components 目录下创建 User.vue 文件，内容如下：
<template>
<div class="c1">
<h1>User组件</h1>
昵称：
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.c1{
border: 1px solid green;
}
</style>
创建 Rename 组件
在 src/components 目录下创建 Rename.vue 文件，内容如下：
<template>
<div class="c1">
<h1>Rename组件</h1>
昵称：<input type="text" >
<button @click="rename">修改</button>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
function rename(){
}
</script>
<style>
.c1{
border: 1px solid red;
}
</style>
修改 App.vue
修改 App.vue 文件，将 2个组件显示到页面上
代码如下：
<template>
<User></User>
<br>
<Rename></Rename>
</template>
<script setup lang="ts">
import Rename from './components/Rename.vue'
import User from './components/User.vue'
</script>
<style scoped>
</style>
定义Store
选项式：类似 Vue 选项式 API，结构清晰易上手。
组合式：类似 Vue3 组合式 API，直接使用 ref/reactive，更灵活。
创建文件
- 在
src下创建stores文件夹 stores文件夹创建User.ts文件
User.ts代码（vue2 选项式）
写法1
import {defineStore} from 'pinia'
/*
变量命名
一般情况：use+文件名+Store
复杂情况：use+业务名+Store
*/
/*
定义store
选项式：
第一个参数是唯一标识
第二个参数是对象
*/
export const useUserStore = defineStore('user',{
// 定义State状态：存储初始数据，必须是函数且返回对象
state(){
return {
nickname: '李雷'
}
}
})
写法2
export const useUserStore = defineStore('user',{
// 定义State状态：存储初始数据，必须是函数且返回对象
state:()=>{
return {
// 选项式，不需要定义成ref，会自动处理
nickname: '李雷'
}
}
})
写法3
export const useUserStore = defineStore('user',{
// 定义State状态：存储初始数据，必须是函数且返回对象
state:function(){
return {
// 选项式，不需要定义成ref，会自动处理
nickname: '李雷'
}
}
})
User.ts代码（vue3 组合式）
/*
定义store，vue3组合式写法
第一个参数是唯一标识
第二个参数是对象
*/
export const useUserStore = defineStore('user',()=>{
return {
// 组合式，推荐定义成ref。不定义成ref，会自动处理，但可能出问题
nickname: ref('李雷')
}
})
修改 User 组件
新加代码
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 使用store中的state状态中的数据
console.log('nickname:',userStore.nickname)
完整代码
<template>
<div class="c1">
<h1>User组件</h1>
昵称：{{userStore.nickname}}
</div>
</template>
<script setup lang="ts">
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 使用store中的state状态中的数据
console.log('nickname:',userStore.nickname)
</script>
<style scoped>
.c1{
border: 1px solid green;
}
</style>
修改 Rename 组件
新增代码
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
// 使用store中的state状态中的数据
console.log("Rename.vue----nickname:",userStore.nickname)
完整代码
<template>
<div class="c1">
<h1>Rename组件</h1>
昵称：<input type="text" v-model="userStore.nickname">
<button @click="rename">修改</button>
</div>
</template>
<script setup lang="ts">
// 导入store
import {useUserStore} from '@/stores/User.ts'
// 创建store对象
const userStore = useUserStore()
console.log("Rename.vue----nickname:",userStore.nickname)
function rename(){
}
</script>
<style>
.c1{
border: 1px solid red;
}
</style>