feat: 监听storage事件，更新store里用户信息，显示用户信息的组件从store拿数据。

src/Store/index.js

@@ -7,6 +7,9 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
+    userAvatar: '',
+    userNickName: '',
+    
     info:'',
     backupInfo:'',
     showInfo:'',
@@ -28,6 +31,9 @@ const store = new Vuex.Store({
     uploadStatusListVideo: [],
   },
   getters: {
+    userAvatar: state => state.userAvatar,
+    userNickName: state => state.userNickName,
+
     isEditing:state=>state.isEditing,
     info:state=>state.info,
     showInfo:state=>state.showInfo,
@@ -49,6 +55,17 @@ const store = new Vuex.Store({
     uploadStatusListVideo: state => state.uploadStatusListVideo,
   },
   mutations: {
+    SetUserAvatar(state, avatar) {
+      if (typeof avatar === 'string') {
+        state.userAvatar = avatar
+      }
+    },
+    SetUserNickName(state, nickName) {
+      if (typeof nickName === 'string') {
+        state.userNickName = nickName
+      }
+    },
+    
     SetTabList(state, list) {
       state.tablist = list
     },
@@ -96,7 +113,21 @@ const store = new Vuex.Store({
     
   },
   actions: {
+    watchUserInfo(context) {
+      function cacheUserInfo() {
+        try {
+          const userInfo = JSON.parse(localStorage.getItem('info'))
+          context.commit('SetUserAvatar', userInfo.head)
+          context.commit('SetUserNickName', userInfo.nickName)
+        } catch (error) {
+          console.log(error)
+        }
+      }
 
+      cacheUserInfo()
+      window.removeEventListener('store', cacheUserInfo)
+      window.addEventListener('storage', cacheUserInfo)
+    }
   },
   modules: {
 

src/components/userInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-info">
-    <img class="avatar" :src="head" alt="" />
-    <div class="nickName">{{nickName}}</div>
+    <img class="avatar" :src="userAvatar" alt="" />
+    <div class="nickName">{{userNickName}}</div>
     <i class="iconfont icon-show_drop-down"></i>
     <ul class="menu">
       <li><span @click="onClickPersonalCenter">个人中心</span></li>
@@ -11,30 +11,28 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
   data() {
     return {
-      nickName: '',
-      head: '',
     }
   },
+  computed: {
+    ...mapGetters([
+      'userAvatar',
+      'userNickName'
+    ]),
+  },
   methods: {
     onClickPersonalCenter() {
       window.location.href = '/#/information'
     },
     onClickLogout() {
-      // localStorage.removeItem('address')
-      // localStorage.removeItem('token')
-      // localStorage.removeItem('info')
-      // localStorage.removeItem('currentName')
       localStorage.setItem('token', '')
       window.location.href = '/#/'
     }
   },
   mounted() {
-    const userInfo = JSON.parse(localStorage.getItem('info'))
-    this.nickName = userInfo.nickName
-    this.head = userInfo.head
   }
 }
 

src/pages/material.js

@@ -24,6 +24,8 @@ Vue.use(Viewer,{
 
 Vue.config.productionTip = false
 
+store.dispatch('watchUserInfo')
+
 new Vue({
   router,
   store,