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

问题描述：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中定义相同的变量名。注意是&& 不是 ||

 1 import { mapGetters } from "vuex";
 2 export default {
 3     data() {
 4         return {
 5            userName: ''
 6         }
 7     },
 8     computed: {
 9         ...mapGetters(["name"])
10     },
11     mounted() {
12         this.getInfo();
13     },
14     methods: {
15         // 初始化时，获取用户名称
16         getInfo() {
17             this.$store.dispatch("user/getUserInfo").then((res) => {
18                 this.userName = res.data[0].userName;
19             });
20         }
21     }
22 }
23

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

 1 confirmAll() {
 2     updateUserInfo(value).then((res) => {
 3         if (res.status === 0) {
 4             this.$message({
 5                 message: "保存成功",
 6                 type: "success"
 7             });
 8             this.getEditProfileInfo();
 9             this.close();
10         }
11     })   
12 },
13 getEditProfileInfo() {
14        this.$store.dispatch("user/getUserInfo").then((res) => {
15            this.formData = res.data[0];
16        });
17 }

3、store---user.js

 1 import { getUserInfo } from '@/api/user'
 2 const getDefaultState = () => {
 3     return {
 4         name: ''
 5     }
 6 }
 7 const state = getDefaultState()
 8 const mutations = {
 9     SET_NAME: (state, name) => {
10         state.name = name
11     }
12 }
13 const actions = {
14     getUserInfo({ commit }) {
15         return new Promise((resolve, reject) => {
16             getUserInfo().then(response => {
17                 commit('SET_NAME', response.data[0].userName)
18                 resolve(response)
19             }).catch(error => {
20                 reject(error)
21             })
22         })
23     },
24 }