说明
- 很多管理系统，一般右上角的
用户信息组件显示当前用户昵称，当点击 【修改昵称】 时，显示修改昵称组件 - 修改昵称后，
用户信息组件也会同时改变
这就涉及到 2个组件共享昵称数据，应该使用Pinia进行状态（用户昵称）管理，如下图：
在 Rename组件中修改昵称，User组件中的昵称会跟着改变
代码执行流程
store
定义 actions、mutations、state
actions中是函数，由 组件 调用this.$store.dispatch()触发mutations中是函数，操作state中的数据。通过commit()触发这些函数state中是存储的数据
代码
修改 src/store/index.js 文件，内容如下：
//导入vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'
//使用vuex插件，插件必须执行下面代码
Vue.use(Vuex)
// 存储数据
const state = {
name:"李雷"
}
// 操作数据
const mutations = {
//第一个参数：state 对象
//第二个参数：commit() 传递的数据
rename(state,data){
console.log("mutations.rename--",data)
console.log(state)
state.name = data
}
}
//响应组件的操作
const actions = {
// 第一个参数：上下文环境，可以调用 commit()
// 第二个参数：dispatch() 传递的数据
rename(context,data){
console.log("actions.rename--",data)
// 通过 commit() 调用 mutations 中的函数
// 第二个参数：要传递的数据
context.commit('rename',data)
}
}
// 创建对象
const store = new Vuex.Store({
actions,
mutations,
state
})
// 对外暴露对象
export default store
User 组件
从 state 中读取 name
在 src/components 目录下创建 User.vue 文件，内容如下：
<template>
<div class="c1">
<h1>User组件</h1>
昵称：{{$store.state.name}}
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.c1{
border: 1px solid green;
}
</style>
Rename 组件
调用 this.$store.dispatch() 触发 Actions中函数
在 src/components 目录下创建 Rename.vue 文件，内容如下：
<template>
<div class="c1">
<h1>Rename组件</h1>
昵称：<input type="text" v-model="name">
<button @click="rename">修改</button>
</div>
</template>
<script>
export default {
data:function(){
return {
name:""
}
},
methods:{
rename(){
// 通过 dispatch() 调用 Actions的中的函数
// 第一个参数：Actions 的 rename() 函数
// 第二个参数：要传递的数据
this.$store.dispatch('rename',this.name)
}
}
}
</script>
<style scoped>
.c1{
border: 1px solid red;
}
</style>
App.vue
修改 App.vue 文件，将 2个组件显示到页面上
代码如下：
<template>
<div id="app">
<User></User>
<br>
<Rename></Rename>
</div>
</template>
<script>
import Rename from './components/Rename.vue'
import User from './components/User.vue'
export default {
name: 'App',
components: {
Rename,
User
}
}
</script>