性能优化-个人信息动态修改

package.json

@@ -15,7 +15,8 @@
     "node-sass": "6.0.0",
     "sass-loader": "11.1.0",
     "vue": "^2.6.14",
-    "vue-router": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "3.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -25,6 +25,9 @@ export default {
       visible:true,
     };
   },
+  created(){
+    this.$store.dispatch('GetUserInfo');
+  },
   methods:{
     // 保存滚动值，这是兼容的写法
     handleScroll () {

src/components/AppHeader.vue

@@ -21,41 +21,28 @@
                 </div>
             </router-link> -->
             <div class="userInfo flex-center">
-                <el-avatar fit="fill" :size="50" :src="avatarUrl"></el-avatar>
+                <el-avatar fit="fill" :size="50" :src="avatar"></el-avatar>
                 <div class="nameAndIntegral">
-                    <div>姓名: {{ dataInfo.userName }}</div>
-                    <div>积分: <span class="blue">{{ dataInfo.surplusIntegral }}</span></div>
+                    <div>姓名: {{ userInfo.userName }}</div>
+                    <div>积分: <span class="blue">{{ userInfo.surplusIntegral }}</span></div>
                 </div>
             </div>
         </nav>
     </div>
 </template>
 <script>
-import { useInfo } from "@/api/allApi";
+import { mapGetters } from 'vuex'
 export default {
     props:['visible'],
     data() {
-        return {
-            dataInfo:{},
-            avatarUrl: "",
-        };
+        return {};
     },
-    created() {
-        this.getUserInfo();
-    },
-    methods: {
-        goToSignIn(){
-            this.$router.push({
-                path: '/home/signIn',
-            });
-        },
-        getUserInfo(){
-            useInfo().then(response=>{
-                this.dataInfo = response.data.data;
-                this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
-            })
-        },
+    computed: {
+        // 将 getter 映射到当前组件的计算属性
+        ...mapGetters(['userInfo','avatar'])
     },
+    created() {},
+    methods: {},
 }
 </script>
 

src/components/SiderInfo.vue

@@ -10,74 +10,59 @@
                     <div class="second-line">点亮在商城的每一天</div>
                 </div>
                 <button class="btn signedin-btn">
-                    <span @click="goToSignIn" v-if="dataInfo.signStatus==0" class="btn-text sign-text">去签到</span>
+                    <span @click="goToSignIn" v-if="userInfo.signStatus==0" class="btn-text sign-text">去签到</span>
                     <span v-else class="btn-text signed-text">已签到</span>
                 </button>
             </div>
         </div>
         <div class="signin-tip sidebar-block">
             <div class="avatar">
-                <el-avatar fit="fill" :size="65" :src="avatarUrl"></el-avatar>
-                <span class="name">{{ dataInfo.userName }}</span>
+                <el-avatar fit="fill" :size="65" :src="avatar"></el-avatar>
+                <span class="name">{{ userInfo.userName }}</span>
             </div>
             <div class="info">
                 <div class="info-item">
                     <div class="item-title">部门：</div>
-                    <div :title="dataInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ dataInfo.deptName }}</div>
+                    <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ userInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
                     <div class="item-title">积分：</div>
-                    <div class="item-content blue">{{ dataInfo.surplusIntegral }}</div>
+                    <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
                 </div>
-                <!-- <div class="info-item">
-                    <div class="item-title">排行：</div>
-                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
-                </div>
-                <div class="info-item">
-                    <div class="item-title">勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
-                </div> -->
             </div>
         </div>
         <div class="sidebar-block sticky-block">
             <div class="avatar">
-                <el-avatar :size="65" :src="avatarUrl"></el-avatar>
-                <span class="name">{{ dataInfo.userName }}</span>
+                <el-avatar :size="65" :src="avatar"></el-avatar>
+                <span class="name">{{ userInfo.userName }}</span>
             </div>
             <div class="info">
                 <div class="info-item">
                     <div class="item-title">部门：</div>
-                    <div :title="dataInfo.deptName" class="item-content">{{ dataInfo.deptName }}</div>
+                    <div :title="userInfo.deptName" class="item-content">{{ userInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
                     <div class="item-title">积分：</div>
-                    <div class="item-content blue">{{ dataInfo.surplusIntegral }}</div>
-                </div>
-                <!-- <div class="info-item">
-                    <div class="item-title">排行：</div>
-                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
+                    <div class="item-content blue">{{ userInfo.surplusIntegral }}</div>
                 </div>
-                <div class="info-item">
-                    <div class="item-title">勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
-                </div> -->
             </div>
         </div>
     </div>
 </template>
 <script>
-import { useInfo } from "@/api/allApi";
+import { mapGetters } from 'vuex'
 export default {
     data() {
         return {
             hoursTip:'你好！',
             isActive: false,
-            dataInfo:{},
-            avatarUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
         };
     },
+    computed: {
+        // 将 getter 映射到当前组件的计算属性
+        ...mapGetters(['userInfo','avatar'])
+    },
     created() {
-        this.getUserInfo();
         this.getHoursTip()
     },
     methods: {
@@ -86,12 +71,6 @@ export default {
                 path: '/home/signIn',
             });
         },
-        getUserInfo(){
-            useInfo().then(response=>{
-                this.dataInfo = response.data.data;
-                this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
-            })
-        },
         getHoursTip() {
             let date = new Date();
             if (date.getHours() >= 0 && date.getHours() < 12) {

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 // import { msgTips } from "@/api/allApi";
 import router from './router'
+import store from './store'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/global.css';
@@ -27,5 +28,6 @@ Vue.config.productionTip = false;
 Vue.use(ElementUI);
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/store/getters.js

@@ -0,0 +1,5 @@
+const getters = {
+  userInfo: state => state.user.userInfo,
+  avatar: state => state.user.avatar,
+}
+export default getters

src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import user from './modules/user'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    user
+  },
+  getters
+})
+
+export default store

src/store/modules/user.js

@@ -0,0 +1,35 @@
+import { useInfo } from '@/api/allApi'
+
+const user = {
+  state: {
+    userInfo:{},
+    avatar: '',
+  },
+
+  mutations: {
+    SET_USERINFO: (state, userInfo) => {
+      state.userInfo = userInfo
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+  },
+
+  actions: {
+    // 获取用户信息
+    GetUserInfo({ commit }) {
+      return new Promise((resolve, reject) => {
+        useInfo().then(response => {
+          const data = response.data.data
+          commit('SET_USERINFO', data)
+          commit('SET_AVATAR', data.httpFile + data.headImage)
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+  }
+}
+
+export default user

src/views/HomeView/RedeemView.vue

@@ -525,11 +525,13 @@ export default {
             if (this.activeName == 'goodsNotice') {
                 start(params).then(response => {
                     console.log(response.data.data);
+                    this.$store.dispatch('GetUserInfo');
                     this.dialogMsgVisible = true;
                 }).catch(() => { })
             } else {
                 kill(params).then(response => {
                     console.log(response.data.data);
+                    this.$store.dispatch('GetUserInfo');
                     this.dialogMsgVisible = true;
                 }).catch(() => { })
             }

src/views/HomeView/SignIn.vue

@@ -33,7 +33,7 @@
       <div class="index-aside aside" :class="{ 'sticky top': isActive }">
         <div class="signin-tip sidebar-block signin">
           <div class="first-line">
-            <button @click="signIn" v-if="dataInfo.signStatus == 0" class="btn">
+            <button @click="signIn" v-if="userInfo.signStatus == 0" class="btn">
               立即签到
             </button>
             <button v-else class="btn signed-btn">今日已签到</button>
@@ -41,54 +41,38 @@
         </div>
         <div class="signin-tip sidebar-block">
           <div class="avatar">
-            <el-avatar :size="65" :src="avatarUrl"></el-avatar>
-            <span class="name">{{ dataInfo.userName }}</span>
+            <el-avatar :size="65" :src="avatar"></el-avatar>
+            <span class="name">{{ userInfo.userName }}</span>
           </div>
           <div class="info">
             <div class="info-item">
               <div class="item-title">部门：</div>
-              <div :title="dataInfo.deptName" class="item-content">{{ dataInfo.deptName }}</div>
+              <div :title="userInfo.deptName" class="item-content">{{ userInfo.deptName }}</div>
             </div>
             <div class="info-item">
               <div class="item-title">积分：</div>
               <div class="item-content blue">
-                {{ dataInfo.surplusIntegral }}
+                {{ userInfo.surplusIntegral }}
               </div>
             </div>
-            <!-- <div class="info-item">
-                    <div class="item-title">排行：</div>
-                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
-                </div> -->
-                <!-- <div class="info-item">
-                    <div class="item-title">勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
-                </div> -->
           </div>
         </div>
         <div class="sidebar-block sticky-block">
           <div class="avatar">
-            <el-avatar :size="65" :src="avatarUrl"></el-avatar>
-            <span class="name">{{ dataInfo.userName }}</span>
+            <el-avatar :size="65" :src="avatar"></el-avatar>
+            <span class="name">{{ userInfo.userName }}</span>
           </div>
           <div class="info">
             <div class="info-item">
               <div class="item-title">部门：</div>
-              <div :title="dataInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ dataInfo.deptName }}</div>
+              <div :title="userInfo.deptName" class="item-content" style="line-height: 1.5rem;">{{ userInfo.deptName }}</div>
             </div>
             <div class="info-item">
               <div class="item-title">积分：</div>
               <div class="item-content blue">
-                {{ dataInfo.surplusIntegral }}
+                {{ userInfo.surplusIntegral }}
               </div>
             </div>
-            <!-- <div class="info-item">
-                    <div class="item-title">排行：</div>
-                    <div class="item-content blue">{{ dataInfo.nowtop }}</div>
-                </div> -->
-                <!-- <div class="info-item">
-                    <div class="item-title">勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
-                </div> -->
           </div>
         </div>
       </div>
@@ -96,7 +80,8 @@
   </div>
 </template>
 <script>
-import { sign, signInfo,useInfo } from "@/api/allApi";
+import { mapGetters } from 'vuex'
+import { sign, signInfo } from "@/api/allApi";
 import calendar from '@/components/Calendar'
 export default {
   components: {
@@ -108,15 +93,15 @@ export default {
       integral:'',
       markDate: [],
       isActive: false,
-      dataInfo: {},
-      avatarUrl:
-        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
       dataList: [],
     };
   },
+  computed: {
+        // 将 getter 映射到当前组件的计算属性
+        ...mapGetters(['userInfo','avatar'])
+  },
   created() {
     this.getSignInfo();
-    this.getUserInfo();
   },
   methods: {
     // 点击日期
@@ -127,12 +112,6 @@ export default {
     changeMonth(date) {
       console.log(date);
     },
-    getUserInfo() {
-      useInfo().then((response) => {
-        this.dataInfo = response.data.data;
-        this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
-      });
-    },
     getSignInfo() {
       signInfo().then((response) => {
           this.markDate = response.data.data.signDays;
@@ -148,7 +127,7 @@ export default {
           type: 'success'
         });
         this.getSignInfo();
-        this.getUserInfo();
+        this.$store.dispatch('GetUserInfo');
       });
     },
     // 保存滚动值，这是兼容的写法

yarn.lock

@@ -6995,6 +6995,11 @@ vue@^2.6.14:
     "@vue/compiler-sfc" "2.7.14"
     csstype "^3.1.0"
 
+vuex@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+  integrity sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"