注意目錄和修改相同的字符編碼

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中定義相同的變量名。注意是&& 不是 ||

 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 }

posted @ 2023-12-05 17:54 黑使閱讀(69) 評論(0) 收藏舉報

刷新頁面返回頂部

黑使

black girl！

vue項目：如何在編輯用戶信息后，能夠及時更新layout下的navar組件中的用戶名，而不是手動刷新？

公告