vue项目：如何在编辑用户信息后，能够及时更新layout下的navar组件中的用户名，而不是手动刷新？

问题描述：layout下的navar组件中展示用户名，初始化时进入layout层会进入mouted中请求接口数据展示名称，但是在编辑弹框中编辑成功后，关闭弹框，此时不会走layout的mouted，因为layout组件的mouted已经加载过一次了，不手动刷新浏览器是不会走mouted生命周期的。那怎么解决这个不能及时更新数据的问题呢？

 我们可以用vuex实现，将获取用户信息的接口放在vuex中，在修改成功并关闭弹框时，通过dispatch请求数据并更新vuex中存入的name。在navar组件中通过mapGetters获取新的name数据。这样就能实现及时更新name的需求了。以下是主要代码：

1、layout页-----navar组件

<span class="user-name">{{ userName && name }}</span>
// 这里写两个变量是因为computed中不能使用name就不能在data中定义相同的变量名。注意是&& 不是 ||

import { mapGetters } from "vuex";
export default {
    data() {
        return {
           userName: ''
        }
    },
    computed: {
        ...mapGetters(["name"])
    },
    mounted() {
        this.getInfo();
    },
    methods: {
        // 初始化时，获取用户名称
        getInfo() {
            this.$store.dispatch("user/getUserInfo").then((res) => {
                this.userName = res.data[0].userName;
            });
        }
    }
}
    

2、编辑用户信息弹框组件

confirmAll() {
    updateUserInfo(value).then((res) => {
        if (res.status === 0) {
            this.$message({
                message: "保存成功",
                type: "success"
            });
            this.getEditProfileInfo();
            this.close();
        }
    })   
},
getEditProfileInfo() {
       this.$store.dispatch("user/getUserInfo").then((res) => {
           this.formData = res.data[0];
       });
}

3、store---user.js

import { getUserInfo } from '@/api/user'
const getDefaultState = () => {
    return {
        name: ''
    }
}
const state = getDefaultState()
const mutations = {
    SET_NAME: (state, name) => {
        state.name = name
    }
}
const actions = {
    getUserInfo({ commit }) {
        return new Promise((resolve, reject) => {
            getUserInfo().then(response => {
                commit('SET_NAME', response.data[0].userName)
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
}