feat: 收藏变色不触发刷新，查看收藏的用户

src/api/communications.js

@@ -7,8 +7,13 @@ function getAllCommunications(payload) {
     return axios.get("https://www.fastmock.site/mock/7626b3aeb545b939cbf526e8fcfda744/api/communications", {params: {userId, page, size, sort}});
 }
 
+function getCommunicationStarers(communicationId) {
+    return axios.get(`https://www.fastmock.site/mock/7626b3aeb545b939cbf526e8fcfda744/api/communications/${communicationId}/stars/users`,);
+}
+
 const communicationsAPIs = {
     getAllCommunications,
+    getCommunicationStarers,
 };
 
 export default communicationsAPIs;

src/views/CommunicationPage/ExplorePage/ExploreItem.vue

@@ -1,9 +1,20 @@
 <template>
     <el-card class="explore-item" shadow="never">
+
         <div class="explore-item-star" >
-          <el-icon v-if="starred===true" style="font-size: 20px" @click="star()"><Star /></el-icon>
-          <el-icon v-if="starred===false" style="font-size: 25px;color: orange" @click="cancelStar()"><StarFilled /></el-icon>
+          <el-tooltip placement="top-start" effect="light">
+            <template #content>
+              <p style="max-width:500px;">用户{{starersListString}}收藏了本交流</p>
+            </template>
+            <div>
+              <el-icon v-if="starred===true" style="font-size: 20px" @click="star()"><Star /></el-icon>
+              <el-icon v-if="starred===false" style="font-size: 20px;color: orange" @click="cancelStar()">
+                <StarFilled />
+              </el-icon>
+            </div>
+          </el-tooltip>
         </div>
+
         <div class="explore-item-description">
             <h1 class="description-title">{{ title}}</h1>
             <div style="font-size: 14px;margin-top: 5px">
@@ -17,8 +28,11 @@
             </div>
             <p class="description-detail">{{ description }}</p>
         </div>
+
         <img class="explore-item-img" :src="photos">
+
     </el-card>
+
 </template>
 
 <script>
@@ -28,6 +42,12 @@ export default {
   props: {
     communicationVO: Object,
   },
+  data(){
+    return{
+      starersList: [],
+      starersListString: "",
+    };
+  },
   computed: {
     title() {
       return this.communicationVO.title || "无标题";
@@ -56,17 +76,38 @@ export default {
     deadline(){
       return this.communicationVO.deadline;
     },
-    starred(){
+    starred: {
+      get(){
         return this.communicationVO.starred;
+      },
+      // set(val){
+      //   this.communicationVO.starred = val;
+      // }
     },
   },
   methods: {
     star(){
+      this.$emit("starChange",this.communicationVO);
       ElMessage.success("收藏成功");
     },
     cancelStar(){
+      this.$emit("starChange",this.communicationVO);
       ElMessage.success("取消收藏成功");
     },
+    fetchData(){
+        const communicationId =  this.communicationVO.id;
+        this.$apis.getCommunicationStarers(communicationId).then(res=>{
+          this.starersList = res.data.data;
+          this.starersListString = "";
+          this.starersList.forEach(starer=>{
+            this.starersListString = this.starersListString + starer.userName + ",";
+          });
+          this.starersListString = this.starersListString.substr(0, this.starersListString.length-1);
+      });
+    },
+  },
+  mounted() {
+    this.fetchData();
   }
 };
 </script>

src/views/CommunicationPage/ExplorePage/ExplorePage.vue

@@ -32,7 +32,12 @@
             </div>
         </div>
         <div class="explore-main">
-            <ExploreItem class="explore-item" v-for="communication in communicationList" :key="communication.id" :communicationVO="communication" />
+            <ExploreItem class="explore-item"
+                         v-for="communication in communicationList"
+                         :key="communication.id"
+                         :communicationVO="communication"
+                         @starChange="starChange(communication)"
+            />
         </div>
         <div class="pagination">
           <el-pagination
@@ -102,6 +107,9 @@ export default {
     sortChange(){
       this.fetchData();
     },
+    starChange(communication){
+      communication.starred = !communication.starred;
+    }
   },
   async mounted() {
     this.fetchData();