feat: using vuex to make login status reactively (#51)

src/components/Player.vue

@@ -36,7 +36,8 @@
             </span>
           </div>
         </div>
-        <div class="like-button" v-show="isLoggedIn">
+        <!-- 账号登录才会显示 like 图标 -->
+        <div class="like-button" v-show="accountLogin">
           <button-icon
             @click.native="likeCurrentSong"
             :title="$t('player.like')"
@@ -118,7 +119,7 @@
 <script>
 import { updateMediaSessionMetaData } from "@/utils/mediaSession";
 import { mapState, mapMutations, mapActions } from "vuex";
-import { isLoggedIn } from "@/utils/auth";
+import { isAccountLoggedIn } from "@/utils/auth";
 import { userLikedSongsIDs } from "@/api/user";
 import { likeATrack } from "@/api/track";
 import "@/assets/css/slider.css";
@@ -144,14 +145,14 @@ export default {
     setInterval(() => {
       this.progress = ~~this.howler.seek();
     }, 1000);
-    if (this.isLoggedIn) {
+    if (isAccountLoggedIn()) {
       userLikedSongsIDs(this.settings.user.userId).then((data) => {
         this.updateLikedSongs(data.ids);
       });
     }
   },
   computed: {
-    ...mapState(["player", "howler", "settings", "liked"]),
+    ...mapState(["player", "howler", "settings", "liked", "accountLogin"]),
     currentTrack() {
       return this.player.currentTrack;
     },
@@ -174,9 +175,6 @@ export default {
       let max = ~~(this.currentTrack.dt / 1000);
       return max > 1 ? max - 1 : max;
     },
-    isLoggedIn() {
-      return isLoggedIn();
-    },
   },
   methods: {
     ...mapMutations([

src/components/TrackListItem.vue

@@ -60,7 +60,7 @@
       <div></div>
     </div>
     <div class="actions" v-if="!isTracklist">
-      <button v-if="isLoggedIn" @click="likeThisSong">
+      <button v-if="accountLogin" @click="likeThisSong">
         <svg-icon
           icon-class="heart"
           :style="{
@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import { isLoggedIn } from "@/utils/auth";
+import { mapState } from "vuex";
 
 import ArtistsInLine from "@/components/ArtistsInLine.vue";
 import ExplicitSymbol from "@/components/ExplicitSymbol.vue";
@@ -93,6 +93,7 @@ export default {
     return { focus: false, trackStyle: {} };
   },
   computed: {
+    ...mapState(["accountLogin"]),
     imgUrl() {
       if (this.track.al !== undefined) return this.track.al.picUrl;
       if (this.track.album !== undefined) return this.track.album.picUrl;
@@ -127,9 +128,6 @@ export default {
       if (this.isPlaying) trackClass.push("playing");
       return trackClass;
     },
-    isLoggedIn() {
-      return isLoggedIn();
-    },
   },
   methods: {
     goToAlbum() {